Vue.js + vue-chartjs でチャートを表示する

2020年3月25日

Vue-chartjs は、
Vue.js の Chart.js ラッパーです。

ビルドのセットアップなしで、
ブラウザで直接使用できます。

ブラウザで直接使用したい場合は、
以下を追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>

その後、
コンポーネントを登録します。

Vue.component('line-chart', {
 extends: VueChartJs.Line,
 mounted() {
  this.renderChart({
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [{
    label: 'Data One',
    backgroundColor: '#f87979',
    data: [40, 39, 10, 40, 39, 80, 40]
   }]
  }, {
   responsive: true,
   maintainAspectRatio: false
  })
 }
})
var vm = new Vue({
 el: '.app',
 data: {
  message: 'Hello World'
 }
})

テンプレートを追加します。

<div class="app">
    {{ message }}
  <line-chart></line-chart>
</div>

以下がサンプルになります。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました