2013-11-21 2 views
5

HighchartsのVU Meterグラフを準備して値の配列を表示しています。 <SELECT><OPTION>を選択すると、これらの値が1つずつ表示されます。 グラフのtitle<OPTION>の選択したlabelと一致するように変更する方法を理解できましたが、残念ながら私はnoobです。seriesdataを正しく更新できませんでした。ハイチャート - VUMeterの系列[0] .dataとyAxisのタイトルを正しく更新する方法は?

最小作業例jsFiddleで利用できます。具体的には、以下の機能が<SELECT>が変更されたときに発生する:

$('#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(); 
}); 

私の質問は次のとおりです。

  1. yAxistitleサポートの変更ですか?これは、グラフのタイトルを更新するコマンドに似ていますが、もちろん機能しません。
  2. どのようにデータを変更する必要がありますか? chart.series[0].setData(...)chart.series[0].update(...)の両方は、針が消えて、まだ留まるようにしました。 dataのフォーマットが正しくない可能性がありますか?あなたは私の間違いを私に指摘できますか?
  3. これは不要です、右(上記の場合)

お寄せいただきありがとうございます。


Sebastian Bochan私は正しい方向に向かって指摘してくれたので、私は上記の問題を解決することができました。上記の機能の最終バージョンの下に見つけてください:

$('#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 
    }); 
}); 

答えて

10
  1. はい、それは軸上と呼ばれる上の更新機能によって可能です。 http://api.highcharts.com/highcharts#Axis.update()

  2. アップデート、ポイントで動作するので、chart.series [0] .data [0] .update(20);にする必要があります。

+0

私は正しい方向に向いてくれてありがとう!あなたの提案を他の人の参考にして質問を更新します! –