小任務之使用SVG畫柱狀圖~

 function drawBar(data) {
     var barGraph = document.querySelector("#bar-graph");
     var graphWidth = 700;
     var graphHeight = 300;
     const graphPadding = 25;
     //軸的寬高
     const axisWidth = graphWidth - graphPadding;
     const axisHeigt = graphHeight - graphPadding;
     //柱的間隔
     const barGap = 12;
     //單個數據柱子的寬
     const barWidth = ((axisWidth - graphPadding - barGap * 13) / 12) / data.length;
     //每根柱子的顏色
     const barColor = ["#27a1ea", "#9cdc82", "#ff9f69", "#d660a8", "#6370de", "#32d3eb", "#d4ec59", "#feb64d", "#b55cbd"];
     //軸的顏色
     const axisColor = "#000";
     //最大值
     var dataMax = 0;
     //柱狀圖數據sale
     var newData = [];

     //設置html的svg的寬度和高度
     barGraph.setAttribute("width", graphWidth);
     barGraph.setAttribute("height", graphHeight);
     //找到最大值
     for (let i = 0; i < data.length; i++) {
         if (typeof data[0] != "number") {
             let temp = Math.max(...data[i].sale);//es6擴展運算符 將數組轉為序列。
             if (temp > dataMax) {
                 dataMax = temp;
             }
             newData.push(data[i].sale);
         } else {
             dataMax = Math.max(...data);
             newData.push(data[i]);
         }
     }
     //數據和像素的折算
     var rate = dataMax / (axisHeigt - graphPadding);
     //繪制坐標軸
     let barHtml = [];
     //先縱軸再橫軸注意SVG畫線模板間隔
     barHtml.push("<line x1=" + graphPadding + " y1=0" + " x2=" + graphPadding + " y2=" + axisHeigt + " stroke=" + axisColor + " stroke-width='2'/>");
     barHtml.push("<line x1=" + graphPadding + " y1=" + axisHeigt + " x2=" + axisWidth + " y2=" + axisHeigt + " stroke=" + axisColor + " stroke-width='2'/>");
     //繪制柱狀圖(需要X,Y,寬度,高度)(高度=數值/rate)
     for (let i = 0; i < newData.length; i++) {
         for (let j = 0; j < newData[i].length; j++) {
             let num = parseInt(newData[i][j]);
             let barBlock = data.length * barWidth;

             let x = graphPadding + (j + 1) * barGap + i * barWidth + j * barBlock;
             barHtml.push("<rect width=" + barWidth + " height=" + (num / rate) + " x=" + x + " y=" + (axisHeigt - num / rate) + " fill=" + barColor[i] + " />");
         }
     }
     barGraph.innerHTML = barHtml.join(""); //join("")拼成字符串無間隔 join()默認為逗號,
 }

今天終於將SVG生成柱狀圖的代碼給完成了，過程中定位比較重要，包括坐標軸的X,Y點，和長度寬度，都需要要好好設計一下。

其中viewbox屬性比較有趣，學習了，貼出鑫旭大神的解說，非常清晰。http://www.zhangxinxu.com/wordpress/?p=4323

在編寫代碼時，記得哪個數組對應哪些數據，實在忘記可用console.log進行打印查看，方便定位

for循環中的i記得要聲明！！

循環拼寫html時，記得對應好SVG的標簽格式，留出適當的空格才正確！

拼接最后的html時，用join（“”），中間不用放任何內容，便可連接html，不能使用join（），否則默認為逗號連接。