十八、基礎教程-鑽取功能(drilldown)
阿新 • • 發佈:2019-02-10
鑽取是改變展現資料維度的層次,變換分析的粒度。它包括向上鑽取(drillup)和向下鑽取(drilldown)。
Highcharts 在 3.0.8 開始提供內建的鑽取功能功能,使用鑽取功能需要額外的引入相關的模組檔案
<script src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>
一、基礎的使用
下鑽的基礎使用是指定資料點的 drilldown 屬性,其值為儲存在根屬性 drilldown.series 的資料列的 ID,也就是資料點關聯著隱藏的資料列(儲存在 drilldown資料列數組裡),當資料點被點選時,這個隱藏的資料列會被載入到圖表中並替換當前資料列。對於柱狀圖、條形圖及餅圖,下鑽過成會用動畫效果來過渡。 對於多級下鑽,可以繼續在 drilldown.series 的資料點裡配置 drilldown 屬性。
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals' ,
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota' , 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
二、事件及相關屬性
1. 鑽取事件
鑽取相關的事件包括 chart.events.drilldown 和 chart.events.drillup。這些事件在非同步鑽取或高階使用是非常有用
2. 可鑽取的座標軸及資料標籤樣式
為了區別普通資料點和可鑽取的資料點,我們提供了設定可鑽取 X 座標軸樣式(activeAxisLabelStyle)及資料標籤樣式(activeDataLabelStyle)設定
3. 返回上一級操作按鈕
我們提供了返回上一級操作按鈕相關的配置屬性,包括主題、定位等,其中按鈕中的文字是在 語言文字 中設定的。
三、非同步鑽取
在大多數情況下,我們需要動態的載入下鑽的資料列資料,在這種情況下,可以設定資料點的 drilldown = true,然後在鑽取事件裡做進一步的資料獲取操作。當資料獲取完畢後,我們可以通過 Chart.addSeriesAsDrilldown 函式來講下鑽的資料列新增到圖表中。
對於下鑽包含多個數據列的情況下,可以先呼叫 Chart.addSingleSeriesAsDrilldown 函式來一次新增資料列,最後呼叫 Chart.applyDrilldown 來應用所有的下鑽資料列。
對於下鑽包含多個數據列的情況下,可以先呼叫 Chart.addSingleSeriesAsDrilldown 函式來一次新增資料列,最後呼叫 Chart.applyDrilldown 來應用所有的下鑽資料列。