vue-chart.jsでグラフを描いてみる。　（メモ）

vue.jsを勉強していく中で、グラフ描写をしたくなりました。そこで、vue-chart.jsというライブラリを用いてみることにしました。

まずはvueのcomponentsに以下のvueファイルをそれぞれ配置。

<script>
//BarChart.vue

import { Bar } from 'vue-chartjs';

export default {
 extends: Bar,
 name: 'chart',
 data () {
   return {
     data: {
       labels: [
         '2018', '2019', '2020', '2021', '2022', '2023',
       ],
       datasets: [
         {
           data: [30, 50, 40, 40, 30, 20],
           backgroundColor: 'rgb(213, 238, 249, 0.6)',
           borderColor: '#4F92BA',
           borderWidth: 1,
         },
         {
           data: [20, 40, 30, 30, 10, 40],
           backgroundColor: 'rgb(255, 225, 230, 0.6)',
           borderColor: '#ff6484',
           borderWidth: 1,
         },
       ],
     },
     options: {
       legend: {
         display: false
       },
       tooltips: {
         enabled: false,
       },
       scales: {
           yAxes: [{
               display: true,
               ticks: {
                   beginAtZero: true
               }
           }]
       }
     }
   }
 },
 mounted () {
   this.renderChart(this.data, this.options)
 }
}
</script>

<script>
//PieChart.vue

import { Pie } from 'vue-chartjs';

export default {
 extends: Pie,
 name: 'chart',
 data () {
   return {
     data: {
       labels: [
         '2018', '2019', '2020',
       ],
       datasets: [
         {
           data: [30, 50, 40,],
           backgroundColor: [
             'rgb(213, 238, 249, 0.6)',
             'rgb(255, 218, 226, 0.6)',
             'rgb(255, 236, 219, 0.6)',
           ],
           borderColor: '#fff',
           borderWidth: 1,
         },
       ],
     },
     options: {
       legend: {
         display: true
       },
       tooltips: {
         enabled: true,
       },
       // scales: {
       //     yAxes: [{
       //         display: true,
       //         ticks: {
       //             beginAtZero: true
       //         }
       //     }]
       // }
     }
   }
 },
 mounted () {
   this.renderChart(this.data, this.options)
 }
}
</script>

<script>
//RaderChart.vue

import { Radar } from 'vue-chartjs';

export default {
 extends: Radar,
 name: 'chart',
 data () {
   return {
     data: {
       labels: [
         '社員の士気', '待遇面の満足度', '福利厚生', '成長やりがい', '退職理由', '将来性', '強み、弱み', '経営者への提言'
       ],
       datasets: [
         {
           label: '',
           data: [3.0, 3.5, 4.1, 4.5, 3.4, 2.1, 4.6, 2.2],
           backgroundColor: [
             'rgb(213, 238, 249, 0.6)'
           ],
           borderColor: [
             '#4F92BA'
           ],
           borderWidth: 1,
           tension: 0,
           pointBorderColor: '#4F92BA',
           pointBackgroundColor: '#4F92BA'
         },
       ],
     },
     options: {
       legend: {
         display: false
       },
       scale: {
         ticks: {
           beginAtZero:true,
           stepSize: 1,
         }
       },
       tooltips: {
         enabled: false
       }
     },
   }
 },
 mounted () {
   this.renderChart(this.data, this.options)
 }
}
</script>

次に、これらのコンポーネントをApp.vueに追加。

<template>
 <div style="overflow: hidden; margin-left: 5%; margin-top: 5%;">
   <div style="float: left;">
     <RaderChart />
   </div>
   <div style="float: left;"> 
     <PieChart />  
   </div>
   <div style="float: left;">
     <BarChart />
   </div>
 </div>
</template>

<script>
import PieChart from './components/PieChart';
import RaderChart from './components/RaderChart';
import BarChart from './components/BarChart';

export default {
 name: 'App',

 components: {
   RaderChart,
   BarChart,
   PieChart,
 },
 data() {
   return {
   };
 }
};
</script>

このようにすれば、以下のようなグラフを簡単に描写することができます！

注意すべきことは、vue-chartがchart.jsの最新バージョンに対応していないことです。なので、chart.jsを導入するときは、バージョンを3.0未満にしてください。

npm install chart.js@2.60

参考にしたページはこちらです。