javascript - 如何从 HighCharts 中的系列点击事件手动触发 afterSetExtremes 事件
问题描述
每次用户点击一个系列时,我想手动触发 afterSetExtremes 事件。
我希望能够在 afterSetExtreme 事件上访问图表道具,但是 this 对象与调用事件的位置不同。
样板jsfiddle在这里:https ://jsfiddle.net/d450e1az/5/
Highcharts.chart('container', { chart: {
type: 'area',
borderColor: '#000000',
zoomType: 'x',
animation: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
events: {
afterSetExtremes: function(event) {
console.log(this);
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function (event) {
alert(this.index);
console.log(this); this.chart.xAxis[0].hcEvents.afterSetExtremes[0](event)
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {data: [21.9, 70.5, 109.4, 121.2, 124.0, 166.0, 115.6, 128.5, 210.4, 190.1, 92.6, 52.4]}] });
解决方案
您可以通过Highcharts.fireEvent()
单击某个点时的方法来实现它。检查下面发布的演示和代码。
但是,afterSetExtremes
事件被设计为在更改极端值后调用。在这种情况下,极端情况是固定的,所以也许您应该使用不同的方法来实现您的期望。
代码:
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(event) {
Highcharts.fireEvent(this.xAxis, 'afterSetExtremes');
}
}
}
}
演示:
API参考: