1  function drawBar(data) {
 2      var barGraph = document.querySelector("#bar-graph");
 3      var graphWidth = 700;
 4      var graphHeight = 300;
 5      const graphPadding = 25;
 6      //轴的宽高
 7      const axisWidth = graphWidth - graphPadding;
 8      const axisHeigt = graphHeight - graphPadding;
 9      //柱的间隔
10      const barGap = 12;
11      //单个数据柱子的宽
12      const barWidth = ((axisWidth - graphPadding - barGap * 13) / 12) / data.length;
13      //每根柱子的颜色
14      const barColor = ["#27a1ea", "#9cdc82", "#ff9f69", "#d660a8", "#6370de", "#32d3eb", "#d4ec59", "#feb64d", "#b55cbd"];
15      //轴的颜色
16      const axisColor = "#000";
17      //最大值
18      var dataMax = 0;
19      //柱状图数据sale
20      var newData = [];
21
22      //设置html的svg的宽度和高度
23      barGraph.setAttribute("width", graphWidth);
24      barGraph.setAttribute("height", graphHeight);
25      //找到最大值
26      for (let i = 0; i < data.length; i++) {
27          if (typeof data[0] != "number") {
28              let temp = Math.max(...data[i].sale);//es6扩展运算符 将数组转为序列。
29              if (temp > dataMax) {
30                  dataMax = temp;
31              }
32              newData.push(data[i].sale);
33          } else {
34              dataMax = Math.max(...data);
35              newData.push(data[i]);
36          }
37      }
38      //数据和像素的折算
39      var rate = dataMax / (axisHeigt - graphPadding);
40      //绘制坐标轴
41      let barHtml = [];
42      //先纵轴再横轴注意SVG画线模板间隔
43      barHtml.push("<line x1=" + graphPadding + " y1=0" + " x2=" + graphPadding + " y2=" + axisHeigt + " stroke=" + axisColor + " stroke-width='2'/>");
44      barHtml.push("<line x1=" + graphPadding + " y1=" + axisHeigt + " x2=" + axisWidth + " y2=" + axisHeigt + " stroke=" + axisColor + " stroke-width='2'/>");
45      //绘制柱状图(需要X,Y,宽度,高度)(高度=数值/rate)
46      for (let i = 0; i < newData.length; i++) {
47          for (let j = 0; j < newData[i].length; j++) {
48              let num = parseInt(newData[i][j]);
49              let barBlock = data.length * barWidth;
50
51              let x = graphPadding + (j + 1) * barGap + i * barWidth + j * barBlock;
52              barHtml.push("<rect width=" + barWidth + " height=" + (num / rate) + " x=" + x + " y=" + (axisHeigt - num / rate) + " fill=" + barColor[i] + " />");
53          }
54      }
55      barGraph.innerHTML = barHtml.join(""); //join("")拼成字符串无间隔 join()默认为逗号,
56  }