1. 程式人生 > >十八、基礎教程-鑽取功能(drilldown)

十八、基礎教程-鑽取功能(drilldown)

鑽取是改變展現資料維度的層次,變換分析的粒度。它包括向上鑽取(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 來應用所有的下鑽資料列。