以JavaScript , SVG 繪製一個 pieChart (圓餅圖)

woff

展示圖：

JavaScript SVG 繪製 pieChart 圓餅圖

程式碼

1. <div id="chart"></div>
   
2. 
   
3. <script>
   
4.     /**
   
5.      * 建立SVG元素，並繪製一個圓餅圖
   
6.      * width, height: 此SVG圖形大小，單位是像素(pixels)
   
7.      * cx, cy, r : 此圓餅中心和半徑
   
8.      * lx, ly : piechart的左上角
   
9.      * data : 一個物件，其特性名稱是資料標籤(data labels), 而特性值是每個標籤關聯的值
   
10.      *
    
11.      * 此函式迴船SVG元素，呼叫者必須把她插入到文件中，使他變得可見
    
12.      */
    
13.     function pieChart(options) {
    
14.         let {width, height, cx, cy, r, lx, ly, data} = options;
    
15.         // svg元素的XML命名空間
    
16.         let svg = "http://www.w3.org/2000/svg";
    
17.         //創建SVG元素，並指出像素大小與使用者座標
    
18.         let chart = document.createElementNS(svg, "svg");
    
19.         chart.setAttribute("width", width);
    
20.         chart.setAttribute("height", height);
    
21.         chart.setAttribute("viewBox", `0 0 ${width} ${height}`);
    
22.         //定義文字樣式
    
23.         chart.setAttribute("font-family", "sans-serif");
    
24.         chart.setAttribute("font-size", "18")
    
25. 
    
26.         //以陣列方式取得那些標籤和值，並加總那些值
    
27.         //以知道這圓餅有多大
    
28.         let labels = Object.keys(data);
    
29.         let values = Object.values(data);
    
30.         let total = values.reduce((x,y) => x+y);
    
31. 
    
32.         //為所有切片找出角度。切片i起始於angles[i]
    
33.         //結束於angles[i+1]。弧度(radians)
    
34.         let angles = [0];
    
35.         values.forEach((x,i) => angles.push(angles[i] + x/total * 2 * Math.PI));
    
36. 
    
37.         // 現在以迴圈跑過此圓餅的切片
    
38.         values.forEach((value, i) => {
    
39.             //計算切片與圓相交的兩點位置
    
40.            let x1 = cx + r * Math.sin(angles[i]);
    
41.            let y1 = cy - r * Math.cos(angles[i]);
    
42.            let x2 = cx + r * Math.sin(angles[i+1]);
    
43.            let y2 = cy - r * Math.cos(angles[i+1]);
    
44. 
    
45.            let big = (angles[i+1] - angles[i] > Math.PI) ? 1 : 0;
    
46.            
    
47.            // 此字串描述如何繪製圓餅圖的一個切片
    
48.            let path = `M${cx},${cy}` + `L${x1},${y1}` + `A${r},${r} 0 ${big} 1` + `${x2},${y2}` + "Z";
    
49.            // 大約15個顏色
    
50.            let color = `hsl(${(i*40)%360},${90-3*i}%,${50+2*i}%)`;
    
51.            let slice = document.createElementNS(svg , "path");
    
52.            slice.setAttribute("d", path);
    
53.            slice.setAttribute("fill", color);
    
54.            slice.setAttribute("stroke", "black");
    
55.            slice.setAttribute("stroke-width", "1");
    
56.            chart.append(slice);
    
57.             
    
58.            //繪製為該值一個對應小方形
    
59.            let icon = document.createElementNS(svg, "rect");
    
60.            icon.setAttribute("x", lx);
    
61.            icon.setAttribute("y", ly+30*i);
    
62.            icon.setAttribute("width", 20);
    
63.            icon.setAttribute("height", 20);
    
64.            icon.setAttribute("fill", color);
    
65.            icon.setAttribute("stroke", "black");
    
66.            icon.setAttribute("stroke-width", "1");
    
67.            chart.append(icon);
    
68.             
    
69.            //新增標籤到小方形右邊
    
70.            let label = document.createElementNS(svg, "text");
    
71.            label.setAttribute("x", lx + 30);
    
72.            label.setAttribute("y", ly +30*i +16);
    
73.            label.append(`${labels[i]} ${value}`);
    
74.            chart.append(label);
    
75.         });
    
76.         return chart;
    
77.     }
    
78. 
    
79.     document.querySelector("#chart").append(pieChart({
    
80.         width:640, height: 400, cx:200, cy:200, r:180, lx:400, ly:10,
    
81.         data:{
    
82.             "JavaScript" : 71.5,
    
83.             "Java": 45.4,
    
84.             "Bash/Shell": 40.4,
    
85.             "Python" : 37.9,
    
86.             "C#" : 35.3,
    
87.             "PHP" : 31.4,
    
88.             "C++" : 24.6,
    
89.             "C" : 22.1,
    
90.             "TypeScript" : 18.3,
    
91.             "Ruby" : 10.3,
    
92.             "Swift" : 8.3,
    
93.             "Obiective-C" : 7.3,
    
94.             "Go" : 7.2,
    
95.         }
    
96.     }));
    
97. 
    
98. </script>
    

複製代碼