单击 HighStock 图中的 rangeSelector 时阈值发生变化

Question

我需要更改点击 HighStock 图表中的 rangeSelector 的阈值。另外，我需要更改 y 轴 PlotLines 内的线值。

我尝试了以下代码

xAxis: {    
                events:{
                    setExtremes: function(e) {
                       if (e.trigger == "rangeSelectorButton" && 
                            e.rangeSelectorButton.text == "1m"){
                                  // this.threshold = 20;
                                  alert("on click of 1m range selector");
                                  // for threshold value
                                  this.threshold=20;
                                  this.series[0].plotOptions.threshold=20;
                                   this.plotOptions[0].series[0].threshold=20;
                                   this.rangeSelector.clickButton(0, true);
                                // for changing the line value of plotLines
                                this.yAxis[0].plotLines[0].value=20;

                                            }
                                    },
                            }
            },

Click here 用于 jsfiddle link

我已经设置了一些警报来测试点击 rangeSelector 是否正常。我试图更改值，但图表没有更新。

任何帮助将不胜感激。

Answer 1

在 setExtremes 中，this 引用 xAxis 对象。 threshold 在 series 对象上，因此您需要获取对正确系列的引用。

var series = this.chart.series[0];

然后，您需要update它的新值。

series.update({threshold: threshold}, false);

我正在为 redraw 参数传递 false，因为我们还将更新 plotLine，并且我们只想重绘一次。

对于 plotLine，您需要参考 yAxis。

var yAxis = this.chart.yAxis[0];

然后，您需要将新的 plotLine 设置传递给 update 方法。

 yAxis.update({
     plotLines: [{
        value: threshold,
        color: 'green',
        dashStyle: 'shortdash',
        width: 2,
        label: {
             text: 'Last quarter minimum'
        }
     }]
 });

https://jsfiddle.net/w6bzohgd/3/

单击 HighStock 图中的 rangeSelector 时阈值发生变化

Threshold value change on click of rangeSelector in HighStock graph

javascript

jquery

highcharts

highstock