Highcharts：根据启用的系列添加情节线答案

【问题标题】：Highcharts: Add plotlines based on enabled seriesHighcharts：根据启用的系列添加情节线
【发布时间】：2018-01-07 02:01:29
【问题描述】：

我制作了一个包含多个系列的折线图 (4)。所以图表显示 4 条线。所有系列都显示在图表图例中，可以通过单击启用/禁用。

我想在 Y 轴上添加每个系列的最大值的情节线。这很容易通过定义 4 条情节线来实现。他来了棘手的部分。当一个系列被禁用（隐藏）时，如何在 Y 轴上隐藏相应的情节线？

我发现这个小提琴在您单击图表时会动态添加情节线，但我需要在单击图例中的系列时添加/删除它们。

http://jsfiddle.net/jugal/wHnnE/

var myPlotLineId="myPlotLine";
var chartingOptions = {
    chart: {
        renderTo: 'container',
        events: {
            click: function(evt) {
                var xValue = evt.xAxis[0].value;
                var xAxis = evt.xAxis[0].axis;

                $.each(xAxis.plotLinesAndBands,function(){
                    if(this.id===myPlotLineId)
                    {
                        this.destroy();
                    }
                });
                xAxis.addPlotLine({
                    value: xValue,
                    width: 1,
                    color: 'red',
                    //dashStyle: 'dash',                   
                    id: myPlotLineId
                });

            }

        }
    }
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.StockChart(chartingOptions);

【问题讨论】：

您没有包含指向您找到的小提琴的链接。
对不起:)。忘记了
我得到一个错误 jugalsLib is not defined

标签： highcharts

【解决方案1】：

您需要在系列节目中添加和删除情节线并隐藏事件。

var chart = Highcharts.chart('container', {

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    plotLines: [{
      value: 5.5,
      color: 'red',
      width: 2,
      id: 'plot-line-1'
    }]
  },

  series: [{
    events: {
      show: function() {
        chart.xAxis[0].addPlotLine({
          value: 5.5,
          color: 'red',
          width: 2,
          id: 'plot-line-1'
        });
      },
      hide: function() {
        chart.xAxis[0].removePlotLine('plot-line-1')
      }
    },
    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]
  }]
});

http://jsfiddle.net/du1512ua/

【讨论】：