HighCharts - 设置最小滴答间隔
HighCharts - set minimum Tick Interval
我有一列 highchart,其中有两个系列,其中的数据如下:
series1 : [10000, 20000, 30000, 40000, 50000]
series2 : [500, 600, 800, 1200, 1400]
当我有两个轴时,需要设置10000的刻度间隔。因此 y 轴的刻度按照系列 1。而且看起来还不错。
现在,我点击图例,只允许显示series2。
因此视图中只有 series2,并且 tickinterval 10000 并不是我们所需要的。
我需要动态调整刻度间隔,当显示任何一个系列时,即单击图例时。我该如何实现?
您可以在 :
试试这个场景
https://stackblitz.com/edit/angular-bar-highcharts-kabali
[点击余额(图例)。 tickInterval: 1000000]
您可以使用legendItemClick
事件函数回调并动态设置tickInterval
属性:
events: {
legendItemClick: function() {
if (this.visible) {
this.yAxis.update({
tickInterval: 100000
});
} else {
this.yAxis.update({
tickInterval: 1000000
});
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/g1weLpkq/
API参考:
https://api.highcharts.com/highcharts/series.column.events.legendItemClick
https://api.highcharts.com/class-reference/Highcharts.Axis#update
我有一列 highchart,其中有两个系列,其中的数据如下:
series1 : [10000, 20000, 30000, 40000, 50000]
series2 : [500, 600, 800, 1200, 1400]
当我有两个轴时,需要设置10000的刻度间隔。因此 y 轴的刻度按照系列 1。而且看起来还不错。
现在,我点击图例,只允许显示series2。
因此视图中只有 series2,并且 tickinterval 10000 并不是我们所需要的。
我需要动态调整刻度间隔,当显示任何一个系列时,即单击图例时。我该如何实现?
您可以在 :
试试这个场景https://stackblitz.com/edit/angular-bar-highcharts-kabali
[点击余额(图例)。 tickInterval: 1000000]
您可以使用legendItemClick
事件函数回调并动态设置tickInterval
属性:
events: {
legendItemClick: function() {
if (this.visible) {
this.yAxis.update({
tickInterval: 100000
});
} else {
this.yAxis.update({
tickInterval: 1000000
});
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/g1weLpkq/
API参考:
https://api.highcharts.com/highcharts/series.column.events.legendItemClick
https://api.highcharts.com/class-reference/Highcharts.Axis#update