この記事は公開されてから6ヶ月以上経過しています。
情報が古い可能性がありますのでご注意ください。
情報が古い可能性がありますのでご注意ください。
Highchartsで描画したチャートをJSから更新する
Highchartsで描画したチャートの値はあとからjavascriptで更新できます。
デモをちょっと改変してサンプルを作ってみました↓
options = {} // 略 var chart = Highcharts.chart('container', options); function onClick() { chart.series[0].data[0].update({y: 80000}); chart.series[1].data[0].update({y: 60000}); chart.series[2].data[0].update({y: 40000}); chart.series[3].data[0].update({y: 100000}); chart.series[3].data[1].update({y: 100000}); chart.series[4].data[0].update({y: 1000}); }
んで、ボタンを押したらonClickが呼ばれるようにしておきました。雑だけど、まあ。
onClickではhighchartsのインスタンスのseries以下のデータに対してupdateを呼び出します。すると値が更新されて、アニメーション付で再描画されます。アニメーションがあるのが気持ち良い感じ。
JSFiddleから試してみてください。ちなみにchartのインスタンスはjQueryで$('#container').highcharts()とかやっても取得できます。
update関数の詳細はドキュメントで確認できます。
