2013-11-21 11 views
5

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:

  1. è il cambiamento di s' title il yAxis supportato? Questo è simile al comando per aggiornare il titolo del grafico, ma ovviamente non funziona.
  2. Come posso modificare i dati? Sia chart.series[0].setData(...) e chart.series[0].update(...) hanno fatto sparire l'ago per rimanere immobili. data non è formattato correttamente, forse? Potresti per favore indicarmi il mio errore?
  3. 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 
    }); 
}); 

risposta

10
  1. Sì, è possibile funzione di aggiornamento sulla chiamata in asse. http://api.highcharts.com/highcharts#Axis.update()

  2. aggiornamento, funziona su punto, quindi dovrebbe essere chart.series [0] .data [0] .update (20);

+0

Grazie mille per avermi indicato verso la giusta direzione! Aggiornerò la domanda con i tuoi suggerimenti come riferimento per altre persone! –