[Highcharts] Pie with drilldown,有層次的圓餅圖

Posted by Huli on 2015-05-06

Highcharts是一套javascript的library
目的是快速幫你畫出好看的統計圖表
官網有很多範例,可以自己去看看,基本的像是線圖、圓餅圖、區域圖、長條圖…全部都完整的支援
甚至還有3D或是更進階一點的圖表

今天要來研究的是一種進階的圓餅圖
官方範例:http://www.highcharts.com/demo/pie-drilldown
這是瀏覽器市佔率的圓餅圖,但特殊的地方在於這個圓餅圖有兩層
你可以針對IE這個項目點下去,就會進一步出現IE各個版本的市佔率為何
但官方範例用到的功能太多,而且看source code其實很難看出來要喂的格式為何
所以我重寫了一份簡單易懂的範例
http://codepen.io/anon/pen/mJepZe

要注意的是要額外引入drilldown這個檔案才可以用這個功能

1
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

要給的資料分為兩部份,第一部份是「分類」

brandsData
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
{
"name":"Safari ",
"y":4.64,
"drilldown":"Safari"
},
{
"name":"Opera ",
"y":1.54,
"drilldown":"Opera"
},
{
"name":"Proprietary or Undetectable",
"y":0.29,
"drilldown":null
}
];

y就是要顯示出來的數值,這邊要自己換算成%數
drilldown即是指定待會點下去以後會選到的id

drilldownSeries
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
[
{
"name":"Safari版本",
"id":"Safari",
"data":[
[
"v5.1",
3.53
],
[
"v5.0",
0.85
],
[
"v4.0",
0.14
],
[
"v4.1",
0.12
]
]
},
{
"name":"Opera版本",
"id":"Opera",
"data":[
[
"v11.x",
1.3
],
[
"v12.x",
0.15
],
[
"v10.x",
0.09
]
]
}
]

這裏的id對應到的是剛剛分類的drilldown,而data底下就是第二層圓餅圖的資料
以一個陣列裡面包[name,value]的形式呈現

而一個最陽春畫圖的code長這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#chart').highcharts({
chart: {
type: 'pie'
},
title: {
text: '瀏覽器市佔率'
},
series: [{
name: '瀏覽器',
colorByPoint: true,
data: brandsData
}],
drilldown: {
series: drilldownSeries
}
});

值得一提的是highchart提供一堆客製化的option,最上面附的範例或是我改寫的範例都多少有用到一些客製化
例如說你覺得圖表顏色太醜不喜歡,可以換成自己喜歡的顏色

1
2
3
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

滑鼠移上去的tooltip,圓餅圖的文字說明、格式也都可以自己調整,真是方便