vue-chartjsでグラフ（チャート）を実装する

五芒星のグラフをVue.jsで作りたかったので、作り方をメモる。

インストール

以下のnpm、yarn、CDNのいづれかを使ってvue-chartjsをインストールします。

npm

npm install vue-chartjs chart.js --sa

yarn

yarn add vue-chartjs chart.js

CDN

<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>

　コードをかく

1　scriptタグの中に、コンポーネントの作成

Vue.component('radar-chart', {
    extends: VueChartJs.Radar,
    mounted () {
      this.renderChart({
        labels: ['ルックス', 'トーク力', '企画力', '頭脳・知識', '笑い・ユーモア', '人間性','カリスマ性','好感度'],
        datasets: [{
            label: '# of Votes',
            data: [1
            , 2, 3, 4, 5, 6, 7, 8],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
      }, {responsive: true, maintainAspectRatio: false})
    }
  })

2　html（またはtemplate）の中で、コンポーネントを利用

<radar-chart></radar-chart>

五芒星のグラフは
レーダーグラフというらしいです。
ほかにいろんなグラフ使えます。
公式サイトをのぞきたいとおもいます.

次は入力した値は反映されるグラフを作ります。

参考
https://www.kabanoki.net/4118/