javascript - type - xaxis highcharts

Highcharts=> Obtención del ID de un punto al hacer clic en un gráfico de líneas

Question

Estoy creando un gráfico de líneas y me gustaría, cuando hago clic en un punto de la línea, mostrar una ventana emergente que contenga algunos datos sobre este punto. El problema que trato de resolver es obtener el ID, la serie asociada con este punto o algo así.

Aquí está mi código:

plotOptions: {
      column: {
        pointWidth: 20
      },

      series: {
        cursor: ''pointer'',
        events: {
          click: function(event) {
            requestData(event.point);
          }
        }
      }

Lo intenté

requestData(this.point)

,

requestData(this.point.id)

También, pero no funciona.

¿Cómo obtenemos la identificación de un punto?

Muchas gracias.

Answer 1

De acuerdo con los documentos, event.point mantiene un puntero al punto más cercano en el gráfico .

Así que escribo el event.point a la consola y ve qué hay disponible.

console.log(event.point);

De los documentos:

clic: se activa cuando se hace clic en la serie. La palabra clave this se refiere al objeto serie en sí. Un parámetro, evento, se pasa a la función. Esto contiene información de eventos comunes basada en jQuery o MooTools, dependiendo de qué biblioteca se utiliza como base para Highcharts. Además, event.point mantiene un puntero al punto más cercano en el gráfico.

Ejemplo basado en el ejemplo de la documentación: http://jsfiddle.net/5nTYd/

Haga clic en un punto y compruebe la consola.

Answer 2

Encontré esta publicación anterior en mi búsqueda para ==> agregar un marcador a un punto cuando hago clic en un gráfico de "Líneas de tendencia" [en línea: series de tiempo "] de Highcharts [cuando hago clic en cualquier lugar de la propia línea dibujada ]. Bueno, sin mostrarte mucho código, mira en el

  cursor: ''pointer'',
                    point: {
                      events: {
                             click: function(e) {
                                alert("X("+this.x+"),Y("+this.y+")");
                                }//click
                          }//events
                           }//point

Si desea más detalles, me complace proporcionarle!

Answer 3

Para devolver la ''ID'' del punto seleccionado en el gráfico, use el valor ''X'':

plotOptions: {
    series: {
        cursor: ''pointer'',
        events: {
            click: function(event) {
                   // Log to console
                console.log(event.point);
                alert(this.name +'' clicked/n''+
                      ''Alt: ''+ event.altKey +''/n''+
                      ''Control: ''+ event.ctrlKey +''/n''+
                      ''Shift: ''+ event.shiftKey +''/n''+
                      ''Index: ''+ event.point.x);
            }
        }
    }
},

Vea un ejemplo aquí: http://jsfiddle.net/engemasa/mxRwg/

Answer 4

Simplemente hice esto al pasar 3 objetos a la serie de datos de la serie y luego sacarlo del atributo de configuración del objeto con el clic.

Así que puedes construir tus datos de serie algo como esto:

 series: [{
  name: ''Example'',
  yAxis: 0,
  type: ''spline'',
  data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]

En el atributo de datos sobre el primer elemento es la fecha (x), el segundo elemento es otro punto de datos (y) y el tercero es el id del objeto que representa ese objeto de datos. Esta "z" no aparecerá en el gráfico, pero aparecerá como el tercer elemento en la matriz de configuración. Por ejemplo: al usar el atributo de punto plotOptions para capturar el clic, el ID del objeto está en la alerta como esto.config [2]

  plotOptions: {
    series: {
      cursor: ''pointer'',
      point: {events: {click: function() {console.log(this); alert(''Category: ''+ this.category +'', value: ''+ this.y + ''Series: '' +  this.series.name + '' ID: '' + this.config[2])}}}
     }
   },

Answer 5

Tuve el mismo problema ... si lo entiendo correctamente. Mi solución es esta, para obtener el id de la serie ... Ver si ayuda ...

plotOptions{
 series:{
  cursor: ''pointer'',
    events: {
      click: function(event) {
        console.log(event.point.series.userOptions.id);
      }
    }
  }

Answer 6

 plotOptions: {
   series: {
     cursor: ''pointer'',
     point: {
       events: {
         click: function() {
           console.log(this); 
           alert(''Category: ''+ this.category +'', value: ''+ this.y + ''Series: '' +  this.series.name + '' ID: '' + this.config[2])
         }
       }
     }
   }
 },