如何使用Highstock的Highstock创建Plotlines的图例?

时间:2017-02-13 12:29:17

标签: javascript graph highcharts highstock

我在这里有一个带有Plotlines的Highstock图表:http://jsfiddle.net/qd0rmazg/3/

我希望能够有一个Plotlines的图例,类似于系列的图例,点击某个类别的Plotlines可以显示或隐藏。

在我的JSfiddle示例中,有两类Plotlines。是否可以切换每个类别的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',
      }]
}

2 个答案:

答案 0 :(得分:1)

据我所知,情节线没有原生的HC传说。但是,您可以在页面上创建自定义图例元素,并使用HC功能显示/隐藏绘图线,如下例所示:

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


MATCH (n:ArticleConv {id:"firstId"})
OPTIONAL MATCH (m:ArticleCode {name:"targetName"}) WHERE m.begin <= n.begin <= m.end
OPTIONAL MATCH (l:ArticleCode {num:"targetName"}) WHERE not(()-[:Version]->(l)) 
FOREACH (o IN CASE WHEN m IS NOT NULL THEN [m] WHEN m IS NULL AND l IS NOT NULL THEN [l] ELSE [] END | MERGE (n)-[r:Link]->(o))

答案 1 :(得分:1)

如我的评论中所述,此处有一项功能请求:

请添加您的投票和评论。

Vladimir M提供了一个很好的解决方案,用您自己的自定义图例显示/隐藏绘图线。

另一种常见方法是使用系列作为您的plotLine,这样您就可以获得全系列功能。

示例系列:

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

小提琴:

如果您需要垂直绘图线,数据设置稍微复杂一些,但仍然非常可行。

{{EDIT to demo vertical plot line:

首先,您必须为您的y轴设置最小值/最大值(可以在图表加载时以编程方式完成):

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

然后,您在[x,y]对中指定数据,x值为plotLine值,y值为Y轴最小值和最大值:

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

更新了小提琴:

使用该方法,您可以为每个情节线添加一个系列,或者,如果您希望所有这些都是相同的图例和设置,您可以通过在所需的线之间插入null点来添加多个: / p>

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

小提琴: