Highcharts: あとからグラフデータ(series)を追加・削除する
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
便利だ。