Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vue-chartjsでグラフを描く

More than 1 year has passed since last update.

Vue.jsで使えるグラフ描画ライブラリはいくつかありますが、有名なのはどれもChart.jsのラッパーライブラリとなっています。
今回はその中でも多機能なvue-chartjsを使ってみることにしました。

インストール

https://vue-chartjs.org/ja/

インストールはvue-chartjsの他にChart.jsも必要です。

yarn add vue-chartjs chart.js

vue-chartjsの公式ドキュメントには、Vue.jsで使うための必要最低限の情報しかないため、
グラフについて詳しく知りたい場合はChart.jsの公式ドキュメントを調べましょう。

https://www.chartjs.org/docs/latest/

グラフ描画

グラフ描画は簡単です。データを定義、もしくはAPIで取得するなどしてrenderChart()するだけ。

Chart.vue
<script>
import { Bar } from 'vue-chartjs';

export default {
  extends: Bar,
  name: 'chart',
  data () {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          {
            label: 'Bar Dataset',
            data: [10, 20, 30, 40, 50, 30],
            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: 1
          },
          {
            label: 'Line Dataset',
            data: [10, 50, 20, 30, 30, 40],
            borderColor: '#CFD8DC',
            fill: false,
            type: 'line',
            lineTension: 0.3,
          }
        ]
      },
      options: {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Month'
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              stepSize: 10,
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>
Index.vue
<template>
  <div>
    <h1>棒グラフと線グラフ</h1>
    <chart></chart>
  </div>
</template>

<script>
import Chart from './Chart';

export default {
  components: {
    Chart,
  },
}
</script>

スクリーンショット 2019-07-12 14.57.17.png

注意点

公式ドキュメントにも書かれていますが、renderChart()に渡されるoptionsはリアクティブでないことです。

描画できるグラフの種類

https://www.chartjs.org/docs/latest/charts/

コンポーネント名 グラフ名
Line 折れ線グラフ
Bar or HorizontalBar 棒グラフ
Radar レーダーチャート
Pie or Doughnut 円グラフ
PolarArea 鶏頭図
Bubble バブルチャート
Scatter 散布図

パラメータいくつか

labelString

https://www.chartjs.org/docs/latest/axes/labelling.html

グラフの目盛りの名称を表示します。デフォルトでは表示されません。

stepSize

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size

グラフの目盛り間隔は指定されていないと自動でよろしくやってくれます。便利。

lineTension

https://www.chartjs.org/docs/latest/charts/line.html#line-styling

折れ線グラフにおける、線の曲線具合を設定するパラメータです。
0で直線、所謂折れ線グラフになります。数字を増やしていくに従って、より曲がりくねったベジェ曲線でグラフが描かれます。

lineTension = 0

スクリーンショット 2019-07-12 14.15.26.png

lineTension = 0.4

スクリーンショット 2019-07-12 14.17.00.png

lineTension = 0.8

スクリーンショット 2019-07-12 14.17.18.png

まとめ

使いやすいです。
だいたいのことはChart.jsの公式ドキュメントを読めば、出来ること出来ないことがわかると思います。
以上、快適なインフォグラフィック生活を〜:beer:

参考URL

https://vue-chartjs.org/ja/
https://www.chartjs.org/docs/latest/
https://www.webprofessional.jp/creating-beautiful-charts-vue-chart-js/

kiyc
Webエンジニア。インフラもバックエンドもフロントエンドも書いています。 普段書いているのはPHP(Laravel)、JavaScript(Vue.js)です。
prime-order
組織と業務に変革をもたらす新しいカタチのシステム開発サービス
https://prime-order.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away