如何在Highcharts图上绘制垂直线？

Question

我正在使用Highcharts，我想绘制垂直线的值。喜欢;

我怎么能这样做？谢谢。

这里是我的代码

 <script type="text/javascript"> 

$(function() { 
    var chart; 
$(document).ready(function() { 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'area' 
     }, 
    title: { 
     text: '<b> </b>' 
    }, 
     xAxis: { 

      labels: { 
       formatter: function() { 
        return this.value; // clean, unformatted number for year 
       } 
      } 
     }, 
     yAxis: { 
      labels: { 
       formatter: function() { 
        return this.value/1000 +'k'; 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b>'; 
      } 
     }, 
      xAxis: { 
     categories: [ 
      'Mon', 
      'Tue', 
      'Wed', 
      'Thu', 
      'Fri', 
      'Sat', 
      'Sun' 
     ], 
     plotBands: [{ // visualize the weekend 
      from: 5.5, 
      to: 6.5, 
      color: 'rgba(68, 170, 213, .2)' 
     }] 
    }, 

     plotOptions: { 

      area: { 
       pointStart: 1, 
       marker: { 
        enabled: false, 
        symbol: 'circle', 
        radius: 1, 
        states: { 
         hover: { 
          enabled: true 
         } 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Visit', 
      data: [946, 733, 764, 887, 832,1423] 
     }, { 
      name: 'Unique', 
      data: [746, 633, 664, 687,702,1266] 
     }] 
    }); 
}); 

}); 
    </script> 

Answer 1

对于此任务，您最有可能不得不使用Highcharts renderer，因为您要执行的操作与网格不太匹配，并且不太适合绘图线。

我做了一个very simple example，根据您的代码显示绘制任意垂直线，在一个硬编码的位置。为了实现你的目标，你将不得不计算一些东西，比如每行起始点的x/y位置，以及基于该点值的行的高度。

下面是带有zIndex的slightly different example和您实际需要的一条线，使用V path命令绘制垂直线。

Answer 2

试试这个jsFiddle。从Highcharts API。

Answer 3

我想你可能正在寻找绘图带和/或绘图线。

这里的一些信息：

http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines

Answer 4

如果你想ONY一条线（和面积从开始）：

xAxis:{  
    plotLines: [{ 
     color: 'red', // Color value 
     //dashStyle: 'solid', // Style of the plot line. Default to solid 
     value: + new Date(), // Value of where the line will appear 
     width: '2' // Width of the line  
    }], 
    plotBands: [{ 
     color: '#FFFAFA', // Color value 
     from: +new Date(), // Start of the plot band 
     to: +new Date()+1000*24*3600*30, //30 days 
    }], 
}