HighChart : plot line click event for multiple chart

问题

I am using highchart for some drilldown functions.

I having a function to let the user click on an area plot and add a line. But then i found out my function has a bug in it. There's should be only one red line between those charts, but when the user click on the other chart the existing red line on the first chart is not removing.

The belowing is the function my charts sharing.

  var myPlotLineId = "myPlotLine";

    addPlotLine = function(evt) {
      var point = evt.point;
      var xValue = point.x;
      var xAxis = point.series.xAxis;

      Highcharts.each(xAxis.plotLinesAndBands, function(p) {
        if (p.id === myPlotLineId) {
          p.destroy();
        }
      });
      xAxis.addPlotLine({
        value: xValue,
        width: 1,
        color: 'red',
        id: myPlotLineId
      });
    };

It should only allow one red line since i am using ID.

The below is the current situation.

Since i am using id for the plotline is shouldn't allow two line, please see my example:

http://jsfiddle.net/Xm4vW/74/

I want only ONE RED LINE in total out of many charts

UPDATE 1 :

I have tried redraw() in the new demo : http://jsfiddle.net/Xm4vW/80/

but it doesn't help. Please do let me know if the question is not clear enough.

回答1:

There is nothing like 'Highcharts.each(xAxis.plotLinesAndBands, function(p) '. Iterate charts by loop and use 'removePlotLine(PlotLineID)' instead of 'destroy()':

for(i=0;i<Highcharts.charts.length; i++){
    var chart=Highcharts.charts[i];
    chart.xAxis[0].removePlotLine('myPlotLineId');
}

And set id in parenthesis:

id: 'myPlotLineId'

here is jsfiddle http://jsfiddle.net/asadsarwar89/bh4kz9rw/

来源：https://stackoverflow.com/questions/39564418/highchart-plot-line-click-event-for-multiple-chart

标签

javascript

jquery

Highcharts