五芒星のグラフを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>
五芒星のグラフは
レーダーグラフというらしいです。
ほかにいろんなグラフ使えます。
公式サイトをのぞきたいとおもいます.
次は入力した値は反映されるグラフを作ります。