如何使用 Highstock of Highcharts 为 Plotlines 创建图例？

Question

我这里有一个带有情节线的 Highstock 图：http://jsfiddle.net/qd0rmazg/3/

我希望能够有一个情节图例，其中类似于系列图例，单击后可以使特定类别的情节线可见或隐藏。

在我的 JSfiddle 示例中，有 2 类 Plotlines。是否可以切换每个类别的 Plotlines 的可见性？我似乎找不到任何支持这一点的东西。

这就是我创建情节的方式：

xAxis: {
   plotLines: [{
      value: Date.UTC(2016, 12, 29), // year, month, day
      width: 1,
      color: 'blue',
      dashStyle: 'ShortDash',
      label: {
          text: 'Category 1',
      },
   }, {
      value: Date.UTC(2016, 11, 12), // year, month, day
      width: 1,
      color: 'green',
      dashStyle: 'Solid',
      label: {
          text: 'Category 2',
      }]
}

Answer 1

据我所知，情节线没有本地 HC 传说。但是，您可以在页面上创建自定义图例元素并使用 HC 功能 show/hide 绘制线条，如示例所示：

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/

 chart.xAxis[0].removePlotLine('plot-line-1');

 chart.xAxis[0].addPlotLine({
        ....
        id: 'plot-line-1'
    });

Answer 2

如我的评论所述，这里有一个功能请求：

https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend

请添加您的投票和评论。

Vladimir M 为 show/hide 带有您自己的自定义图例的情节线提供了很好的解决方案。

另一种常见的方法是使用线系列作为您的 plotLine，这可以让您受益于完整的系列功能。

示例系列：

{
  name: 'PlotLine',
  type: 'line',
  color: 'rgba(204,0,0,1)',
  data: [25,25,25,25,25,25,25,25,25,25]
}

Fiddle:

http://jsfiddle.net/jlbriggs/nh65m306/

如果需要垂直绘图线，数据设置稍微复杂一些，但还是很可行的。

{{编辑演示垂直绘图线：

首先，您必须为您的 y 轴设置 min/max（可以在加载图表时以编程方式完成）：

yAxis: {
  min: 0,
  max: 75,
  maxPadding: 0
}

然后，您以 [x,y] 对指定数据，x 值是您的 plotLine 值，y 值是您的 Y 轴最小值和最大值：

data: [[4,0], [4,75]]

已更新fiddle：

http://jsfiddle.net/jlbriggs/nh65m306/1/

使用该方法，您可以为每条绘图线添加一个系列，或者，如果您希望所有系列都具有相同的图例和设置，您可以通过在所需线条之间插入 null 点来添加多个:

data: [[4,0], [4,75], [5,null], [7,0],[7,75]]

Fiddle:

http://jsfiddle.net/jlbriggs/nh65m306/2/

如何使用 Highstock of Highcharts 为 Plotlines 创建图例？

How to create legend for Plotlines with Highstock of Highcharts?

javascript

graph

highcharts

highstock