Highcharts: aggiunta di immagini selezionabili a ogni griglia xAxisLinea

Question

Sto costruendo alcune funzionalità personalizzate in cui gli utenti possono fare clic su punti dati in un grafico a linee per aggiungere note a tale data. Questo è un po 'fuorviante in quanto le note non sono effettivamente allegate alle metriche stesse, ma piuttosto alla data in cui atterra. In altre parole, se ho 6 serie su un grafico a linee che copre le date 01/01/12 - 01/08/12, una singola nota il 01/05/12 si applicherà a tutte le 6 serie. Quindi, come puoi immaginare, fare clic su un punto dati su una delle 6 serie o sulla data 01/05/12 indurre l'utente a credere che questa nota verrà applicata a quel punto dati, non l'intera data e nessuna serie che atterra in quella data.

Così, per rimediare a questo problema di usabilità ho deciso che il miglior segnale visivo sarebbe qualcosa di simile a questo:

Ci sarebbe un icona cliccabile nella parte superiore di ogni asseX griglia che avrebbe è necessario ridimensionare con xAxis gridLine (come se un utente seleziona un'area da ingrandire).

Suggerimenti sul modo migliore per rimuoverlo? Ho solo bisogno di un suggerimento per il modo migliore per aggiungere l'icona a ogni linea ... Ho tutte le funzionalità post-clic già costruite.

Answer 1

Basandosi sul suggerimento di Mark utilizzando l'evento redraw per posizionare le immagini e utilizzando l'evento load per crearle. Aggiungendoli su load è necessario renderli disponibili durante l'esportazione e non si vorrebbe creare nuove immagini su ogni redraw.

Questi eventi grafico sono utilizzati:

events: { 
    load: drawImages, 
    redraw: alignImages 
} 

Nella funzione drawImages sto utilizzando la traduzione inversa per X a posizionare le immagini sulla carta:

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth/2, 
y = chart.plotTop - imageWidth/2; 

e poi aggiungendoli e impostando un gestore di clic, zIndex, puntatore del cursore:

chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth) 
    .on('click', function() { 
     location.href = 'http://example.com' 
    }) 
    .attr({ 
     zIndex: 100 
    }) 
    .css({ 
     cursor: 'pointer' 
    }) 
    .add(); 

In alignImages la funzione attr viene utilizzata per impostare nuovi valori xey per le immagini che vengono calcolate allo stesso modo di drawImages.

esempio completo su jsfiddle

Screenshot:

Answer 2

Coppia di idee. Innanzitutto, vorrei utilizzare l'evento grafico redraw per sapere quando il grafico viene ridisegnato (ad esempio su uno zoom). Quindi, posiziona esplicitamente le tue immagini nei punti di interesse dell'asse. Per ottenere queste query direttamente dal DOM.

utilizzando jQuery:

$('.highcharts-axis') //return an array of the two axis. 

Avranno svg "elemento di testo" I bambini con (x, y) le posizioni.