Highcharts => Ottenere l'id di un punto quando si fa clic su un grafico a linee

Question

Sto costruendo un grafico a linee e vorrei, quando clicco su un punto della linea, visualizzare un popup contenente alcuni dati su questo punto. Il problema che cerco di risolvere è quello di ottenere l'id, la serie associata a questo punto o qualcosa del genere.

Ecco il mio codice:

plotOptions: { 
     column: { 
     pointWidth: 20 
     }, 

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

ho cercato

requestData(this.point) 

,

requestData(this.point.id) 

anche, ma non funziona.

Come si ottiene l'identificazione di un punto?

Grazie mille.

Answer 1

Secondo i documenti, event.point contiene un puntatore al punto più vicino sul grafico.

Quindi scriverei lo event.point alla console e vedere cosa è disponibile.

console.log(event.point); 

From the docs:

clic: Gli incendi quando la serie viene cliccato. La parola chiave si riferisce all'oggetto stesso della serie. Un parametro, evento, viene passato alla funzione. Questo contiene informazioni sugli eventi comuni basate su jQuery o MooTools a seconda della libreria utilizzata come base per Highcharts. Inoltre, event.point mantiene un puntatore al punto più vicino sul grafico.

Esempio sull'esempio dalla documentazione:http://jsfiddle.net/5nTYd/

clic su un punto, e controllare la console.

Answer 2

L'ho appena fatto passando 3 oggetti nell'array di dati serie e quindi estraendolo dall'attributo di configurazione dell'oggetto dal clic.

in modo da poter costruire il vostro qualcosa di dati di serie del genere:

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

Nella attributo data al di sopra del primo elemento è la data (x), il 2 ° elemento è un altro punto di dati (y), e il 3 è l'id dell'oggetto che rappresenta quell'oggetto dati. Questa "z" non verrà visualizzata sul grafico ma verrà visualizzata come terzo elemento nell'array di configurazione. Ad esempio: utilizzando plotOptions attributo punto di catturare lo scatto, l'ID dell'oggetto è la segnalazione come 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

Ho trovato questo vecchio post nella mia ricerca a ==> aggiungere un marcatore a un punto in cui clicco su un grafico ad alta velocità "Linea di tendenza" [negli esempi: "line-time-series"] [quando clicco ovunque sulla stessa linea disegnata].beh, senza mostrarti troppo codice, guarda il

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

se vuoi maggiori dettagli, sono felice di fornire!

Answer 4

Per tornare al 'ID' del punto selezionato sul grafico utilizzare il valore '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); 
      } 
     } 
    } 
}, 

vedere un esempio qui: http://jsfiddle.net/engemasa/mxRwg/

Answer 5

Ho avuto lo stesso problema ... se Ho capito bene La mia soluzione è questa, per ottenere l'id della serie ... vedere se aiuta ...

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