钻取是改变展现数据维度的层次,变换分析的粒度。它包括向上钻取(drillup)和向下钻取(drilldown)。

Highcharts 在 3.0.8 开始提供内置的钻取功能功能,使用钻取功能需要额外的引入相关的模块文件

  1. <script src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>

一、基础的使用

下钻的基础使用是指定数据点的 drilldown 属性,其值为保存在根属性 drilldown.series 的数据列的 ID,也就是数据点关联着隐藏的数据列(保存在 drilldown数据列数组里),当数据点被点击时,这个隐藏的数据列会被加载到图表中并替换当前数据列。对于柱状图、条形图及饼图,下钻过成会用动画效果来过渡。

对于多级下钻,可以继续在 drilldown.series 的数据点里配置 drilldown 属性。

  1. series: [{
  2. name: 'Things',
  3. colorByPoint: true,
  4. data: [{
  5. name: 'Animals',
  6. y: 5,
  7. drilldown: 'animals'
  8. }, {
  9. name: 'Fruits',
  10. y: 2,
  11. drilldown: 'fruits'
  12. }, {
  13. name: 'Cars',
  14. y: 4,
  15. drilldown: 'cars'
  16. }]
  17. }],
  18. drilldown: {
  19. series: [{
  20. id: 'animals',
  21. data: [
  22. ['Cats', 4],
  23. ['Dogs', 2],
  24. ['Cows', 1],
  25. ['Sheep', 2],
  26. ['Pigs', 1]
  27. ]
  28. }, {
  29. id: 'fruits',
  30. data: [
  31. ['Apples', 4],
  32. ['Oranges', 2]
  33. ]
  34. }, {
  35. id: 'cars',
  36. data: [
  37. ['Toyota', 4],
  38. ['Opel', 2],
  39. ['Volkswagen', 2]
  40. ]
  41. }]
  42. }

在线试一试

更多例子:钻取后改变图表类型多级钻取

二、事件及相关属性

1. 钻取事件

钻取相关的事件包括 chart.events.drilldownchart.events.drillup。这些事件在异步钻取或高级使用是非常有用

在线试一试

2. 可钻取的坐标轴及数据标签样式

为了区别普通数据点和可钻取的数据点,我们提供了设置可钻取 X 坐标轴样式(activeAxisLabelStyle)及数据标签样式(activeDataLabelStyle)设置

在线试一试

3. 返回上一级操作按钮

我们提供了返回上一级操作按钮相关的配置属性,包括主题、定位等,其中按钮中的文字是在 语言文字 中设定的。

在线试一试

三、异步钻取

在大多数情况下,我们需要动态的加载下钻的数据列数据,在这种情况下,可以设置数据点的 drilldown = true,然后在钻取事件里做进一步的数据获取操作。当数据获取完毕后,我们可以通过 Chart.addSeriesAsDrilldown 函数来讲下钻的数据列添加到图表中。

在线试一试

对于下钻包含多个数据列的情况下,可以先调用 Chart.addSingleSeriesAsDrilldown 函数来依次添加数据列,最后调用 Chart.applyDrilldown 来应用所有的下钻数据列。

在线试一试Highmaps 例子

原文: https://www.hcharts.cn/docs/basic-drilldown