2012-06-25 8 views
16

Quando si passa con il mouse su un punto in un grafico di grafici ad alta risoluzione, si ottiene un cerchio ingrandito sotto il cursore (o un altro simbolo). Quello che mi piacerebbe fare manualmente innescare quell'effetto hover.Highcharts - innesco manuale dell'evento hover su un punto

So che posso attivare manualmente l'evento mouseOver sul punto, ma che non mi dà il simbolo ingrandito sul grafico che sto andando.

+2

Quando si desidera attivare? Puoi darmi un esempio? –

+0

Nel mio caso particolare, voglio attivare l'effetto quando si passa sopra un altro punto. Sono consapevole della bandiera "condivisa" che puoi inserire nel suggerimento, ma non è quello che sto cercando. Voglio attivare l'effetto hover su un altro punto della stessa serie, ma con una x, y diversa. –

risposta

26

Ho trovato la risposta guardando la fonte - chiama "setState ('hover');" sul punto che vuoi essere evidenziato.

+3

e per rimuovere lo stato hover, chiama "setState();" senza argomenti – d2vid

+0

qualcuno ha un jsfiddle o un codice più dettagliato di questo? – jhanifen

+7

Ecco un jsfiddle che imposta lo stato al passaggio del mouse e mostra il suggerimento: http://jsfiddle.net/xW2MW/ (tramite il [Forum HighCharts] (http://highslide.com/forum/viewtopic.php?f=9&t= 7094)). – BrianS

8

Giusto per aggiungere un'informazione importante:

Per StockChart questa soluzione non funziona:

In this example bisogna sostituire questo:

chart.tooltip.refresh(chart.series[0].data[i]); 

a questo:

chart.tooltip.refresh([chart.series[0].points[i]]); 

Una possibile soluzione è disponibile here .

1

Per dare una risposta più diretta (ad esempio, perché allora non si ha accesso all'istanza Highcharts):

è necessario creare un evento mouseover e dare una corretta pageX e attributi Pagey prima di innescare esso.

0

Ecco un esempio di come selezionare (hover) l'ultimo punto valido in serie a livello di codice:

// Find last not-null point in data 
    let last = data.indexOf(null) - 1; 
    last = (last === -2) ? data.length - 1 : last; 
    const lastPoint = this.series[0].points[last]; 

    // Trigger the hover event 
    lastPoint.setState('hover'); 
    lastPoint.state = ''; // You need this to fix hover bug 
    this.tooltip.refresh(lastPoint); // Show tooltip 

Full JSFiddle exapmle

enter image description here