-
Notifications
You must be signed in to change notification settings - Fork 0
/
9-1graph.html
48 lines (46 loc) · 1.02 KB
/
9-1graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "dark2",
animationEnabled: true,
title: {
text: "105年台灣電力發電結構"
},
theme: "dark2",
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 100,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 5.1, label: "再生能源" },
{ y: 2.6, label: "汽電共生"},
{ y: 36, label: "燃氣" },
{ y: 4.4, label: "燃油" },
{ y: 36.9, label: "燃煤" },
{ y: 1.5, label: "抽蓄水力"},
{ y: 13.5, label: "核能"}
]
}]
});
chart.render();
function explodePie(e) {
for(var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if(i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 420px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>