¿Cómo dibujar líneas verticales en el gráfico de Highcharts?

Question

Estoy usando Highcharts, quiero dibujar líneas verticales en los valores. Me gusta;

¿Cómo puedo hacer eso? Gracias.

Aquí está mi código

 <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

Lo más probable es que tengas que usar el Highcharts renderer para esta tarea, ya que lo que quieres hacer no encaja con una cuadrícula, y no encaja con las líneas de trazado.

He hecho un very simple example, basado en su código que muestra dibujar una línea vertical arbitraria, en una ubicación codificada. Para lograr su objetivo, deberá calcular algunas cosas, como la posición x/y para el punto de inicio de cada línea, y la altura de la línea en función de ese valor de puntos.

Aquí hay un slightly different example con zIndex y una línea como realmente quiere, usando el comando de ruta V para dibujar una línea vertical.

Answer 2

Prueba este jsFiddle. Desde Highcharts API.

Answer 3

Creo que es posible que esté buscando bandas de trazado y/o trazado de líneas.

Aquí hay más información:

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

Answer 4

Si desea ony una línea (y el área a partir de ese):

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