0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-27

五芒星のグラフを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/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?