PIYO - Tech & Life -

Highchartsのチャートに新しいデータ列(Series)をJSで追加する

Highcharts JS Tips

今日もHighcharts。今度は新しいデータ列を追加する方法です。

https://jsfiddle.net/rveczxL1/7

昨日のJSFiddleをちょっと改変して、ボタンを押したら新しいデータ列を追加します。データの変更のときと同様アニメーションつきで描画されるのでとてもリッチな感じで良いです。

highchartのインスタンスにaddSeriesという関数があるのでこちらを使えばOKです。

function onClick() {
  chart.addSeries({
    name: "新しく追加したデータ",
    data: [100000, 110000, 120000, 100000, 130000, 140000]
  });
}

渡すオブジェクトはHighchartsを初期化するときにseriesとして渡す内容と同じで良さそう。

詳細はドキュメント↓

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

ちなみにseriesの削除はこれだけでOK。

chart.series[4].remove();