最后修改时间:2022-12-15 18:27
钻取是改变展现数据维度的层次,变换分析的粒度。它包括向上钻取(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]
]
}]
}
钻取相关的事件包括 chart.events.drilldown
和 chart.events.drillup
。这些事件在异步钻取或高级使用是非常有用
为了区别普通数据点和可钻取的数据点,我们提供了设置可钻取 X 坐标轴样式(activeAxisLabelStyle)及数据标签样式(activeDataLabelStyle)设置
我们提供了返回上一级操作按钮相关的配置属性,包括主题、定位等,其中按钮中的文字是在 语言文字 中设定的。
在大多数情况下,我们需要动态的加载下钻的数据列数据,在这种情况下,可以设置数据点的 drilldown = true
,然后在钻取事件里做进一步的数据获取操作。当数据获取完毕后,我们可以通过 Chart.addSeriesAsDrilldown 函数来讲下钻的数据列添加到图表中。
对于下钻包含多个数据列的情况下,可以先调用 Chart.addSingleSeriesAsDrilldown
函数来依次添加数据列,最后调用 Chart.applyDrilldown
来应用所有的下钻数据列。
在线试一试、Highmaps 例子jshare.com.cn
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22