Come disegnare linee verticali sul grafico Highcharts?

Question

Sto usando Highcharts, voglio disegnare linee verticali sui valori. Piace;

Come posso fare questo? Grazie.

Ecco il mio codice

 <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

È molto probabile che sia necessario utilizzare lo Highcharts renderer per questa attività, poiché ciò che si vuole fare non si adatta perfettamente a una griglia e non si adatta perfettamente alle linee di stampa.

Ho creato un very simple example, in base al codice che mostra il disegno di una linea verticale arbitraria, in una posizione codificata. Per raggiungere il tuo obiettivo dovrai calcolare alcune cose, come la posizione x/y per il punto iniziale di ogni linea e l'altezza della linea in base al valore di quel punto.

Ecco uno slightly different example con zIndex e una linea come effettivamente lo si desidera, utilizzando il comando di percorso V per disegnare una linea verticale.

Answer 2

Prova questo jsFiddle. Da Highcharts API.

Answer 3

Penso che potresti cercare Plot Band e/o Plot Lines.

Ecco qualche informazione in più:

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

Answer 4

Se vuoi girarci intorno una linea (e la zona a partire da quel):

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 
    }], 
}