データを流し込む

コールバック関数でデータを追加し、様々なチャートオプションを指定することができます。ブラウザは自動更新され、ストリーミングチャートが表示されます。カスタマイズのオプションについては Chart.js のドキュメント (opens new window)やサンプル (opens new window)、vue-chartjs のドキュメント (opens new window)をご覧ください。

src/components/MyChart.vue

<script>
import { Line } from 'vue-chartjs'
import 'chartjs-plugin-streaming'
export default {
  extends: Line,
  mounted () {
    this.renderChart({
      datasets: [{
        label: 'データセット 1',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        borderDash: [8, 4],
        fill: true,
        data: []
      }, {
        label: 'データセット 2',
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgb(54, 162, 235)',
        cubicInterpolationMode: 'monotone',
        fill: true,
        data: []
      }]
    }, {
      scales: {
        xAxes: [{
          type: 'realtime',
          realtime: {
            delay: 2000,
            onRefresh: chart => {
              chart.data.datasets.forEach(dataset => {
                dataset.data.push({
                  x: Date.now(),
                  y: Math.random()
                })
              })
            }
          }
        }]
      }
    })
  }
}
</script>

...これで完了です！

GitHub リポジトリ (opens new window)とサンプルもご覧ください。