Question

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

我想在Y轴上添加每个系列的最大值的绘图线。仅通过定义4个绘图线就可以轻松实现。他来了一个棘手的部分。当一个系列被禁用（隐藏）时，如何在Y轴上隐藏相应的情节线？

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

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);

Answer 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/

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

1 个答案: