javascript - Highcharts Sunburst 图表钻取
问题描述
我正在尝试捕获 Sunburst 图表上的钻取事件,但我无法实现它。
我将事件对象添加到图表对象中,但仍然无法在函数内触发警报。
我基本上希望在向下钻取级别后单击右上角的按钮来触发警报/控制台.log。
Codepen在这里供您参考。
Highcharts.chart('container', {
chart: {
height: '100%',
events: {
drillup: function() {
alert('Drilling up')
}
}
},
title: {
text: 'World population 2017'
},
subtitle: {
text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
},
series: [{
type: "sunburst",
data: data,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
}
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
}
}
}, {
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
}]
}],
tooltip: {
headerFormat: "",
pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
}
});
请指教。
解决方案
您可以对 sunburst.prototype.drillUp 方法进行包装,并在向上钻取之前或之后添加您的代码。
(function(H) {
H.wrap(H.seriesTypes.sunburst.prototype, 'drillUp', function (proceed) {
console.log("Before drillup.");
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
console.log("After drillup.");
});
})(Highcharts);
包装原型函数文档:
https ://www.highcharts.com/docs/extending-highcharts/extending-highcharts
推荐阅读
- java - 如何一次性保存父母和孩子(JPA & Hibernate)
- sql - Bigquery:使用 Group By 条件选择前 3 个
- javascript - 无法接收目标文件 Typeahead.js 中的值
- fortran - 英特尔 Fortran 编译器找不到模块“mpi”
- cron - 如何获取 cronjob 创建的作业日志?
- javascript - React Native 提取缓存不起作用(无法启用缓存)
- jenkins - Jenkins Junit Reporter 无法找到 xml 文件?
- ionic3 - 如何在 ionic 3 中实现 pushwoosh
- angular - 访问深度嵌套子组件中的数组
- sql - 如何减少oracle查询响应时间