Sto preparando un grafico VU Meter
in Highcharts per visualizzare una matrice di valori. Questi valori vengono visualizzati uno alla volta, scegliendo uno <OPTION>
di uno <SELECT>
. Sono riuscito a capire come modificare il title
del grafico in modo che corrisponda allo <OPTION>
<OPTION>
selezionato, ma sfortunatamente sono un noob e non sono stato in grado di aggiornare correttamente lo dello series
.Highcharts - come aggiornare correttamente la serie [0] .data e il titolo yAxis di un VUMeter?
A un esempio di funzionamento minimo è disponibile su jsFiddle. In particolare, la seguente funzione viene attivato quando il <SELECT>
è cambiato:
$('#receptorsList0').change(function() {
var selectedOption = $("#receptorsList0 option:selected");
var selectedValue = selectedOption.val();
var selectedText = selectedOption.text();
alert("i: "+selectedOption+", val: "+selectedValue+", text: "+selectedText);
// 1. Possible?
chart.yAxis.setTitle({ text: table[selectedText] + '<br/><span style="font-size:8px">' + selectedText + '</span>' });
// 2. Doesn't work, suggestions? Same with chart.series[0].update(...)
chart.series[0].setData([selectedValue], true);
chart.setTitle({ text: selectedText });
// 3. Unneeded, right?
chart.redraw();
});
Le mie domande sono le seguenti:
- è il cambiamento di s'
title
ilyAxis
supportato? Questo è simile al comando per aggiornare il titolo del grafico, ma ovviamente non funziona. - Come posso modificare i dati? Sia
chart.series[0].setData(...)
echart.series[0].update(...)
hanno fatto sparire l'ago per rimanere immobili.data
non è formattato correttamente, forse? Potresti per favore indicarmi il mio errore? - Questo non è necessario, giusto (a condizione che i lavori di cui sopra)?
Grazie in anticipo per qualsiasi suggerimento è possibile fornire!
Grazie a Sebastian Bochan che mi ha puntato verso la giusta direzione, sono riuscito a risolvere i problemi di cui sopra! Di seguito riportiamo la versione definitiva della funzione di cui sopra:
$('#receptorsList0').change(function() {
var selectedOption = $("#receptorsList0 option:selected");
var selectedValue = parseFloat(selectedOption.val());
var selectedText = selectedOption.text();
chart.yAxis[0].update({
title: {
text : table[selectedText] + '<br/><span style="font-size:8px">'+selectedText+'</span>',
y : -40
}
});
chart.series[0].data[0].update(selectedValue);
chart.setTitle({
text: selectedText
});
});
Grazie mille per avermi indicato verso la giusta direzione! Aggiornerò la domanda con i tuoi suggerimenti come riferimento per altre persone! –