vue-c3のグラフにデータを追加する方法

はじめに

Vue.js で作ったアプリにグラフを表示するために vue-C3 というコンポーネントを利用しています。これで描いたグラフに動的にデータを追加したいと思ったのですが、リファレンスを見てもいまいちやり方がわかりませんでした。
いろいろと試すなかでやり方が分かってきたので載せておきます。

対象者

• 基本的な JavaScript を書ける方
• Vue.js の利用経験がある方

環境

• Vue 2.6
• c3 ( https://github.com/c3js/c3 )
• vue-c3 ( https://github.com/chryb/vue-c3 )

前提

Vue と C3 を利用する環境は出来上がっているものとして進めます。
環境が無い方は公式サイトなどを見て準備をしてください。

データ追加の方法

例えば折れ線グラフがある場合、グラフデータの追加には以下の 2 パターンがあると思います。それぞれのやり方について説明します。

1. 折れ線グラフの本数を増やすパターン
2. 各折れ線グラフの末尾にデータを追加するパターン

結論から言うとどちらのパターンも以下のようなコードでグラフを再描画することで実現できます。

this.handler.$emit('dispatch', chart => {
  chart.load({
    columns: [
      ...
    ]
  })
})

グラフの本数を増やすパターン

追加したいグラフのデータを上記の columns に指定します。

サンプルコード

this.handler.$emit('dispatch', chart => {
  chart.load({
    columns: [
      ['data2', 1, 2, 3, 4, 5] // 追加したいデータ
    ]
  })
})

デモ

See the Pen vue-c3 load-data by kyamadahoge (@kyamadahoge) on CodePen.

各グラフの末尾にデータを追加するパターン

こちらは data 部で保持しているグラフ用のデータに追加したいデータを追加した上で、上記の columns にデータ部のグラフデータを指定すると、グラフに追加（再描画）されます。

サンプルコード

this.chartData.push(5) // 追加したいデータを追加
this.handler.$emit('dispatch', chart => {
  chart.load({
    columns: [
      this.chartData // 再描画するデータ
    ]
  })
})

デモ

See the Pen vue-c3 append-data by kyamadahoge (@kyamadahoge) on CodePen.