Highcharts を利用したグラフを描画するとき、動的に後からグラフデータを追加したい場合がある。

通常の描画の仕方はこう。

chart = Highcharts.Chart({
    chart: {
        anything...
        type: 'line' // 折れ線グラフ
    },
    anything...
    // ここからグラフデータ
    series: [{
        name: '1本目',
        data: [1, 2.5, 2]
    }, {
        name: '2本目',
        data: [1.5, 2, 3.5]
    }]
});

これに、何か特定のイベントが発生したときにもう一本折れ線グラフを追加したいという場合、下のように Highcharts.Chart オブジェクトの addSeries でグラフデータを追加することができる。

chart.addSeries({
    name: '3本目',
    data: [1.75, 2.25, 3]
});

また、特定のグラフデータを削除することもできる。
グラフデータは配列になっており、追加した 3本目 を削除する場合は添字 2 なので以下のようになる。

chart.series[2].remove();

デモ

しかし、Highcharts 便利だ。

参考

• Highcharts API Reference