如何在Highcharts的图例中显示情节线？

Question

我不仅希望我的图例包含系列的名称,我还希望它包含我的其他项目的名称,如我的情节.这是我的代码:

plotLines: [
    {
        color: 'red',
        dashStyle: 'shortdash',
        value: response.AverageTime,
        width: 2,
        label: {
            text: response.PlotLineName, 
            x: +10, 
            y: +30,
            rotation: 360,
            color: 'red'
        }
    }
]

所以我希望我的情节线的名称是"平均速度偏差",如下图所示.我怎样才能做到这一点？

Answer 1

您可以创建一个空系列,模仿绘图线的特征(颜色,破折号样式......).然后,您可以选择使用该legendItemClick事件将其"链接"到绘图线.

例如,您为ID和绘图线选项预定义了这些变量:

plotLineId = 'myPlotLine'; // To identify for removal

// Plot line options for adding
plotLineOptions = {
    color: '#FF0000',
    id: plotLineId, 
    width: 2,
    value: 5.5,
    dashStyle: 'shortdash'
};

你的轴线:

xAxis: {
    plotLines: [ plotLineOptions ]
}

你的模仿系列:

series: [
    // ...
    {
        // Series that mimics the plot line
        color: '#FF0000',
        name: 'My plotline',
        dashStyle: 'shortdash',
        marker: {
            enabled: false
        },
        events: {
            // Event for showing/hiding plot line
            legendItemClick: function(e) {
                if(this.visible) {
                    this.chart.xAxis[0].removePlotLine(plotLineId);
                }
                else {
                    this.chart.xAxis[0].addPlotLine(plotLineOptions);
                }
            }
        }
    }
]

请参阅这个JSFiddle演示如何工作(或这个最小的例子,没有事件).

Answer 2

作为另一种选择,如果你打算制作一个模仿你的情节线的所有方面的假系列......

您可以将该系列作为您的系列plotLine,并跳过将所有内容捆绑在一起的所有额外工作......

喜欢:

{  
  name: 'Plot Line',
  color: 'red',
  type:'line',
  dashStyle: 'shortdash',
  lineWidth: 2,
  data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}

例:

• http://jsfiddle.net/jlbriggs/3d3fuhbb/74/