Node.js 圖表處理 (5)

基本介紹

教學目標

透過 Polymer 開源碼專案之 Google Chart 套件呈現 iOS App 使用分析的比例圖表。

前置作業

  • 完成 Node.js 套件安裝與設置。

  • 建立專案資料夾,同時安裝 Polymer 相關套件

    1
    2
    3
    4
    $ mkdir app
    $ cd app
    $ npm install -g bower
    $ bower init

按照步驟輸入對應資訊產生設定檔,如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
name: 'app',
version: '0.0.1',
authors: [
'leoyeh.me@gmail.com'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'public/components',
'test',
'tests'
]
}

接著安裝 Polymer 相關套件。

1
2
3
4
$ bower install --save Polymer/polymer
$ bower install --save Polymer/core-elements
$ bower install --save Polymer/paper-elements
$ bower install --save GoogleWebComponents/google-chart

  • 最後在專案資料夾中新增前端和後端的程式碼檔案。
    ./public/app.html
    ./server.js

使用教學

撰寫相關程式碼至適當檔案中。

./public/app.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
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<script src="components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/core-header-panel/core-header-panel.html">
<link rel="import" href="components/core-icons/core-icons.html">
<link rel="import" href="components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="components/paper-shadow/paper-shadow.html">
<link rel="import" href="components/google-chart/google-chart.html">
<style type="text/css">
body {
font-family: Arial;
margin: 0;
color: #333;
}

core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}

.card {
display: inline-block;
background: white;
box-sizing: border-box;
width: 500px;
margin: 16px;
padding: 16px;
border-radius: 2px;
}

google-chart {
width: 100%;
}

</style>

</head>
<body fullbleed vertical layout unresolved>
<core-toolbar>
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<span flex>iOS App 使用分析</span>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
</core-toolbar>
<center>
<paper-shadow z="1" class="card">
<h3>iPhone 每天最多人使用 App</h3>
<google-chart
type='pie'
data='/api/v1/iphone_most_popular_apps.json'>

</google-chart>
<p>資料來源: VPON</p>
</paper-shadow>
<paper-shadow z="1" class="card">
<h3>iPad 每天最多人使用 App</h3>
<google-chart
type='pie'
data='/api/v1/ipad_most_popular_apps.json'>

</google-chart>
<p>資料來源: VPON</p>
</paper-shadow>
</center>
</body>
</html>

./server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get("/api/v1/iphone_most_popular_apps.json", function(req, res) {
var data = [["App 類型", "百分比"],
["Entertainment", 28.7 ], ["Finance", 0.2], ["Life", 29.5], ["News", 5.2],
["Social", 8.1], ["Tech", 0.2], ["Travel", 0.8], ["Videos", 27.1], ["Education", 0.1] ]
res.json(data);
});
app.get("/api/v1/ipad_most_popular_apps.json", function(req, res) {
var data = [["App 類型", "百分比"],
["Entertainment", 20.6 ], ["Finance", 0.2], ["Life", 5.0], ["News", 3.2],
["Social", 9.0], ["Tech", 0.2], ["Travel", 0.4], ["Videos", 61.3], ["Education", 0.2] ]
res.json(data);
});
app.listen(8080);

開啟終端機,切換至該專案目錄下,接著執行伺服器程式。

1
$ node server.js

開啟瀏覽器,在網址列輸入 http://127.0.0.1:8080/app.html 進行測試。

相關資源