高图:根据启用的序列添加绘图线 [英] Highcharts: Add plotlines based on enabled series

问题描述

我制作了多个系列的折线图(4).因此，图表显示4条线.所有系列都显示在图表图例中，可以通过单击它们来启用/禁用.

I made a line chart with multiple series (4). So the chart displays 4 lines. All the series are displayed in the chart legend and can be enabled/disabled by clicking them.

我想在Y轴上添加每个系列最大​​值的绘图线.仅定义4条绘图线即可轻松实现.他来了棘手的部分.当某个系列被禁用(隐藏)时，如何在Y轴上隐藏相应的绘图线?

I want to add plotlines on the Y-axis with the maximum value of each series. This is easy to achieve by just defining 4 plotlines. He comes the tricky part. When a series gets disabled (hidden), how can I hide the corresponding plotline on the Y-axis?

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

I found this fiddle adding plotlines dynamically when you click the chart, but I need them to be added/removed when clicking a series in the legend.

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

推荐答案

您将要添加和删除系列显示和隐藏事件上的绘图线.

You'll want to add and remove the plotlines on the series show and hide events.

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/

这篇关于高图:根据启用的序列添加绘图线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！