Node.js 圖表處理 (1)

基本介紹

教學目標

透過 c3.js 套件實作圖表,呈現不同類型 App 產品的每天活躍使用者資訊。

使用教學

新增一個檔案命名為 chart.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
<html>
<head>
<meta charset="utf-8">
<link href="http://library.leoyeh.me/css/c3/c3.css" rel="stylesheet" type="text/css">
<script src="http://library.leoyeh.me/js/d3/d3.min.js" charset="utf-8"></script>
<script src="http://library.leoyeh.me/js/c3/c3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chart"></div>
<script>

var object = [];
object[0] = new Object();
object[0].title = "娛樂類 App 每日活躍使用者 (DAU)";
object[0].number = [77890, 88532, 79849, 76526, 81904, 84042];
object[1] = new Object();
object[1].title = "音樂類 App 每日活躍使用者 (DAU)";
object[1].number = [95436, 102374, 94002, 96423, 96724, 98397];

var columns = [];
for (var n=0; n<object.length; n++) {
columns[n] = [];
columns[n][0] = object[n].title;
for (var m=0; m<object[n].number.length; m++) {
columns[n][m+1] = object[n].number[m];
}
}

var chart = c3.generate({
data: {
columns: columns,
type: "bar",
onclick: function (d, element) { console.log("onclick", d, element); }
},
axis: {
x: {
type: "分類"
}
},
bar: {
width: {
ratio: 0.3
},
}
});
</script>

</body>
</html>

用瀏覽器開啟 chart.html 檔案進行測試。

相關資源