railsにchart.js入れて動かす

やりたいこと

rails + vue.jsでchart.jsを動かしたい。

作ったもの

vue-chartjsを入れる

GitHub - apertureless/vue-chartjs: 📊 Vue.js wrapper for Chart.js

$ yarn add vue-chartjs chart.js

Gemfileに以下を追加してbundle install

gem 'chart-js-rails'

jsの読み込み

app/asset/javascripts/application.jsに以下を追加

//= require popper
//= require Chart.min

描画

• js側

// 前略
import VueCharts from 'vue-chartjs'

Vue.component('chartjs-line', {
  extends: VueCharts.Bar,
  mounted () {
    this.renderChart({
      maintainAspectRatio: true,
      repsonsive: true,
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          type: 'line',
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
});
// 後略

• html側

<div id="app">
    <chartjs-line :width="5" :height="2"></chartjs-line>
</div>