Mostra descrizione comandi per serie invisibili in Highcharts

Question

Sto tentando di visualizzare un suggerimento personalizzato utilizzando Highcharts. È possibile trovare un esempio di codice qui: http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

quando si passa sopra il grafico, si può vedere che il tooltip contiene solo i valori da serie 2, ma non da Serie 1 (che è invisibile). Quando fai clic su "Serie 1" nella legenda, puoi visualizzare i valori della serie 1 nel suggerimento.

EDIT: no code a commettere, basta fissare obsolescenza dei link/aderendo alle regole di editing ...
Esiste un modo per visualizzare i valori da una serie invisibile in un suggerimento?

Answer 1

tooltip: { 
    formatter: function() { 
     var s = '<b>'+ this.x +'</b>'; 
     var chart = this.points[0].series.chart; //get the chart object 
     var categories = chart.xAxis[0].categories; //get the categories array 
     var index = 0; 
     while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays   
     $.each(chart.series, function(i, series) { //loop through series array 
      s += '<br/>'+ series.name +': ' + 
       series.data[index].y +'m';  //use index to get the y value 
     });   
     return s; 
    }, 
    shared: true 
} 

Answer 2

Il formattatore del tooltip è una funzione come qualsiasi altra funzione, quindi se si rendono disponibili i dati è possibile restituire una stringa con valori per tutte le serie. In questo example ho spostato gli array e le categorie della serie per separare le variabili e il formattatore del tooltip utilizza un indice in questi array per trovare i valori.

formatter: function() { 
    var index = $.inArray(this.x, categories); 
    var s = '<b>'+ this.x +'</b>'; 

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index]; 
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index]; 

    return s; 
} 

Answer 3

Un altro modo per andare su questo è quello di rendere certi attributi della serie invisibile, piuttosto che l'intera serie stessa. Questo ti permetterà di vederlo nel tooltip e nella legenda.

Ecco quello che ho fatto: "trasparente"

1. In primo luogo, impostare il colore della linea della serie invisibile agli
2. Successivamente, ho impostato il colore di riempimento per gli indicatori di serie invisibili su "trasparente".
3. Infine, ho disabilitato lo stato di passaggio del mouse per i marcatori. Ciò impedisce che i cerchi di ombre scure compaiano mentre muovi il cursore del mouse su ogni punto della serie visibile.

Ecco una versione modificata del vostro violino originale con questi cambiamenti: http://jsfiddle.net/brightmatrix/fDNh9/184/

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    lineColor: 'transparent',  // make the line invisible 
    marker: { 
     fillColor: 'transparent', // make the line markers invisible 
     states: { 
      hover: { 
       enabled: false  // prevent the highlight circle on hover 
      } 
     } 
    } 
}, { 
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] 
}] 

Due elementi da notare:

1. Ho usato l'attributo enableMouseTracking: false con altre serie invisibile per evitare utenti di interagire con loro (per ottenere effetti visivi). Se lo imposti per la tua serie invisibile, impedirà che i dati della serie vengano visualizzati nella tua descrizione.
2. Se si desidera impedire alla serie invisbile di apparire nella legenda, è possibile aggiungere l'attributo showInLegend: false. I suoi dati continueranno a essere visualizzati nel tooltip.

Spero che questo aiuti gli altri che si imbattono in questa domanda.

Answer 4

Troppo tardi per la risposta, ma questo è quello che ho fatto. Tracciare il grafico e rendere il colore trasparente. Tracciato sull'asse y opposto e impostare il massimo a zero. Imposta alignTicks su false. Qualcosa come questo.

Quindi l'unica cosa necessaria è cambiare il valore del colore nel formattatore del tooltip poiché l'etichetta sarà trasparente.

Spero che questo aiuti qualcuno.

felici di apprendimento :)