Highcharts => Obteniendo el id de un punto al hacer clic en un gráfico de líneas

Question

Estoy construyendo 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 contiene algunos datos sobre este punto. El problema que trato de resolver es obtener la identificación, 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); 
      } 
     } 
     } 

me trataron

requestData(this.point) 

,

requestData(this.point.id) 

también pero no funciona.

¿Cómo obtenemos la id de un punto?

Muchas gracias.

Answer 1

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

Así que escribiría el event.point en la consola y vería qué hay disponible.

console.log(event.point); 

From the docs:

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

Ejemplo basado en el ejemplo de los documentos:http://jsfiddle.net/5nTYd/

clic en un punto, y comprobar la consola.

Answer 2

Acabo de hacer esto pasando 3 objetos a la matriz de datos en serie y luego retirándolos del atributo de configuración del objeto desde el clic.

Así que usted puede construir su algo datos de series 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 por encima de la primera parte es la fecha (x), el segundo elemento es otro punto de datos (y), y el El tercero es la identificación del objeto que representa ese objeto de datos. Esta "z" no se mostrará en el gráfico, sino que aparecerá como el tercer elemento en la matriz de configuración. Por ejemplo: el uso de plotOptions atributo de punto de capturar el clic, el ID del objeto es en la alerta como this.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 3

encontré este antiguo puesto en mi búsqueda a ==> añadir un marcador hasta un punto cuando hago clic en un gráfico Highcharts "Trend Line" [en ejemplos: "line-time-series"] [cuando hago clic en cualquier parte de la línea dibujada].bien, sin mostrarle demasiado código, busque en el

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

si desea obtener más información, me complace proporcionarla.

Answer 4

Para devolver el 'ID' del punto seleccionado en la tabla de utilizar 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); 
      } 
     } 
    } 
}, 

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

Answer 5

que tenía el mismo problema ... si Lo entiendo correctamente Mi solución es la siguiente, 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]) 
     } 
     } 
    } 
    } 
},