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

Highcharts Demo - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

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

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

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

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

詳細はドキュメント↓

Highcharts Class: Chart

api.highcharts.com

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

chart.series[4].remove();