Highcharts - HTML tooltip & datalabels render issue

Question

ecco il mio problema, quando si imposta useHTML: true per datalabels, sembra che il testo dell'etichetta sovrascriva lo sfondo tooltip.

è possibile vedere il comportamento in questa semplice violino: bar chart

tenta di visualizzare un tooltip al passaggio del mouse su una barra, e vedrete il testo del DATALABEL in background tooltip.

È possibile impostare uno z-index sulle etichette dei dati?

ho cercato di aggiungere questo nella definizione tooltip ma senza successo:

style : { 
    color: 'black', 
    'z-index': 0 
    }, 

Ho anche cercato di impostare le classi campata per le etichette di dati e le descrizioni dei comandi, quindi aggiungere una z-index in css proprietà per queste classi, ma non funziona ancora.

Modifica: Poiché sto ancora cercando una soluzione al mio problema, qualcuno può indicarmi il modo di aggiungere una classe alle barre (o ai datalabels) dei grafici? Il mio obiettivo è chiamare uno specifico evento onclick su questa classe.

Answer 1

Ok, ecco una soluzione per il mio problema ... L'idea è quella di creare il proprio tooltip personalizzato.

La soluzione è stata data sul forum Highcharts: Highcharts forum post

Per farlo, impostare la proprietà 'useHTML' su entrambi i datalabels e suggerimenti, rimuovere alcune proprietà predefiniti dei tooltip e la configurazione delle classi CSS nelle funzioni formattatori :

//JS 
datalabels: { 
    ... 
    useHTML: true, 
    formatter: function() { 
     return ("<span class='datalabel'>" + this.y + "</span>"); 
    } 
} 

tooltip: { 
    ... 
    borderWidth:0, 
    borderRadius:0, 
    shadow:false, 
    useHTML: true, 
    formatter: function() { 
     return ("<div class='tooltip'>" + this.y + "</div>"); 
    } 
} 

la fase finale (la più importante) è quella di impostare le regole CSS per la span class Highcharts-tooltip (che viene utilizzato da Highcharts per rendere le descrizioni dei comandi HTML).

//CSS 
.highcharts-tooltip span { 
    background-color:white; 
    z-index:9999!important; 
} 

comunicazione la proprietà z-index, che è la struttura che permetterà la descrizione comando per rendere il DATALABEL.

Ora puoi personalizzare il tuo suggerimento impostando le regole CSS per la classe 'tooltip'.

Per un esempio dal vivo completa, vedere la jsfiddle qui: Custom tooltip

Nota: Non è obbligatorio per specificy classe DATALABEL nel formattatore per questa soluzione alle opere, ho solo bisogno in modo da poter registrare un mouse specifico evento su di esso.

Answer 2

Controllare http://api.highcharts.com/highcharts#tooltip.backgroundColor per il colore di sfondo del suggerimento.

Stesso problema genere è stato risolto con questa struttura al highslide forum