如何在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 
    }], 
}