PIYO - Tech & Life -

Highchartsで描画したチャートをJSから更新する

Highcharts JS Tips

Highchartsで描画したチャートの値はあとからjavascriptで更新できます。

デモをちょっと改変してサンプルを作ってみました↓

https://jsfiddle.net/sz84x5q6/8/
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関数の詳細はドキュメントで確認できます。

https://api.highcharts.com/class-reference/Highcharts.Point.html#update