vue-chartjsをインストールする

npm経由でインストール

$ npm install vue-chartjs chart.js --save

javascript/packs/chart.jsには特に追加で記載する必要はありません。ラクですね！

事前知識（グローバルコンポーネントとローカルコンポーネント）

こちらの記事がコードと一緒に詳しく書いてあります。：【Vue.js】Vue.jsでChart.jsを使う

グローバルコンポーネントとは、javascript/packs/components/chartを用意し、その直下にchart.vue（仮名）を作成し、グラフをchart.jsからインポート、グラフを描画する記述を行う。そして、index.vueの中でchart.vue（仮名）をコンポーネントとして使用する。

ローカルコンポーネントとは、index.vueにchart.jsから直接グラフをインポートし、グラフを描画する記述を行うこと。つまり、コンポーネントを媒介させない方法です。

ざっくりとまとめましたが、今回はコンポーネントを作る必要はないのかなと思いましたので、ローカルコンポーネントで作成していきたいと思います。

とりあえず棒グラフを表示させてみる

javascript/packs/components/index.vue

<template>
  <div>
    <h3>棒グラフを描画する</h3>
    <BarChart/>
  </div>
</template>

<script>
// インポート
import { Bar } from 'vue-chartjs'

var BarChart = {
  extends: Bar,
  mounted () {
    this.renderChart({
      //ラベル
      labels:["１月","２月","３月","４月"],
      //データ詳細
      datasets: [{
        //データタイトル
        label:'勉強時間',
        //データ
        data: [20,30,40,50]
      }]
    });
  }
}

export default {
  name: 'Test',
  components: {
    BarChart
  }
} 

</script>

こんな感じでいろいろデータを変更することができます。

目的の散布図を描く

さきほどの棒グラフを表示していたindex.vueを以下のとおり書き換えて散布図を書いてみましょう。

javascript/packs/components/index.vue

<template>
  <div class=container>
    <h3>散布図を描画する</h3>
    <ScatterChart/>
  </div>
</template>

<script>
// インポート
import { Scatter } from 'vue-chartjs'

var ScatterChart = {
  extends: Scatter,
  mounted () {
    this.renderChart({
      datasets: [{
      //ラベル
      label:'重要度',
      fill: false,
      borderColor: '#f87979',
      backgroundColor: '#f87979',
      //データ詳細
      data: [{
        x: 10,
        y: 20
      },{
        x:5,
        y:6
      },{
        x:4,
        y:6
      }]
    },
    {
    label: '緊急度',
    fil: false,
    borderColor: '#7acbf9',
    backgroundColor: '#7acbf9',
    data: [{
        x: 6,
        y: 7
      },{
        x:-4,
        y:3
      },{
        x:1,
        y:-2
      }]
    }]
  },{responsive: true,maintainAspectRatio: false})
}
}        


export default {
  name: 'Test',
  components: {
    ScatterChart
  }
} 

</script>
では
<style scoped>
//画面に表示されるサイズを適当に整える
.container{
  width:40%;
  height:40%;

}
</style>

rails sをするとこんな感じになりました。

マイナスの値を入れると自動で軸がマイナスも含まれる感じでしょうか。
ちょっと軸の値にバランスがありませんが、とりあえず表示できました。

次回：フォームで入力した値をグラフに反映させるようにする

想定しているアプリが、フォームにtodoリストを重要度と緊急度を入力し、グラフに表示させるというものなので、フォームを作成し、グラフに反映させる作業をしていきたいと思います。その時にラベルも表示させる作業も必要です。

todoリスト部分はrailsが大きく絡んでくると思うので、その後にしたいと思います。

では次回の更新まで ^^) _旦~~

railsにvue-chartjsを導入する

vue-chartjsをインストールする

事前知識（グローバルコンポーネントとローカルコンポーネント）

とりあえず棒グラフを表示させてみる

目的の散布図を描く

次回：フォームで入力した値をグラフに反映させるようにする