vue-chartjsでいろんなグラフを書いてみる

Chart.jsのvue用のラッパーであるvue-chartjsを使って、いろんなグラフを書いてみたので、その簡単な使い方と詰まったところを紹介したいと思います

実装はgithubに公開してあります

github.com

完成イメージはこんな感じです

完成イメージ

コンポーネント構成

今回は、折れ線グラフ(Line chart)・棒グラフ(Bar chart)・円グラフ(Pie chart)を以下のような構成で実装しました

コンポーネント構成

各コンポーネントごとに.vueファイルを作成したので、一つずつコード＋簡単な解説という感じで紹介していきます

App.vue

<template>
    <div style='display:flex;'>
        <line-chart 
            class=chart
        />
        <bar-chart
            class=chart
        />
        <pie-chart
            class=chart
        />
    </div>
</template>

<script>
import LineChart from './LineChart'
import BarChart from './BarChart'
import PieChart from './PieChart'

export default {
    components: { LineChart, BarChart, PieChart },
}
</script>

<style>
.chart {
    width: 500px;
    height: 500px;
}
</style>

各グラフを表示するためのコンポーネントです

グラフのサイズ・位置等を整えている程度で、そんなに難しいことはやっていないのでここの説明は流したいと思います

LineChart.vue

<script>
import { Line } from 'vue-chartjs'

export default {
    name: 'LineChart',
    extends: Line,
    data() {
        return {
            chartData: {
                labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                datasets: [{
                    label: 'sample',
                    borderColor: '#0000ff',
                    data: [100, 90, 60, 70, 50, 30, 40, 50, 60, 100],
                    fill: false
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Line chart'
                },
                legend: {
                    display: false
                },
            }
        }
    },
    mounted: function() {
        this.renderChart(this.chartData, this.options)
    }
}

</script>

折れ線グラフのコンポーネントです

vue-chartjsからLineコンポーネントを継承してLineChartコンポーネントを作成しています

chartDataの書き方については、基本的にvue-chartjsの公式サイトを参考にしました

vue-chartjs.org

折れ線の下を塗りつぶすかどうか・グラフのタイトルを何にするか等のオプションは、vue-chartjsの公式サイトには書いていなかったので、chart.jsのサイトを参考にしました

www.chartjs.org

chartDataとoptionsを作成したあとは、mount時にthis.renderChartを呼び出せばグラフが描画されます

BarChart.vue

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

export default {
    extends: Bar,
    data() {
        return {
            chartData: {
                labels: ['Janualy', 'Februaly', 'March'],
                datasets: [{
                    label: 'sample',
                    backgroundColor:'rgba(255, 60, 60, 0.3)',
                    data: [20, 40, 60]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Bar chart'
                },
                scales: {
                    yAxes: [{
                            ticks: {
                                beginAtZero: true,
                            }
                    }]
                }
            }
        }
    },
    mounted: function() {
        this.renderChart(this.chartData, this.options)
    }
}
</script>

棒グラフのコンポーネントです

LineChartと同様にvue-chartjsからBarコンポーネントを継承しています

chartDataの書き方についても同様に、vue-chartjsの公式サイトを参考に実装しています

y軸に関する設定を何もしないと以下のようになってしまうので、optionsの中でbegonAtZero: trueに設定し、y軸の開始位置が0になるように設定をしています

barchart_fail

PieChart.vue

<script>
import { Pie } from 'vue-chartjs'

export default {
    extends: Pie,
    data () {
        return {
            chartData: {
                labels: ['Janualy', 'Februaly', 'March', 'April'],
                datasets: [{
                    backgroundColor: [
                        'rgba(255, 60, 60, 0.3)',
                        'rgba(60, 60, 60, 0.3)',
                        'rgba(60, 255, 60, 0.3)',
                        'rgba(60, 60, 255, 0.3)',
                    ],
                    data: [100, 120, 30, 70]
                }],
            },
            options: {
                title: {
                    display: true,
                    text: 'Pie chart'
                },
            }
        }
    },
    mounted: function() {
        this.renderChart(this.chartData, this.options)
    }
}
</script>

円グラフのコンポーネントです

上の二つと同様にvue-chartjsからPieコンポーネントを継承しています

chartDataに関しては、vue-chartjsの公式サイトには載っていなかったので、vue-chartjsソースコードを直接見に行ったところ、例が載っていたのでそれを参考にしました

github.com

個人的に詰まったところ

コンポーネントのimportの仕方が間違っていて、3時間くらい時間を溶かしてしまったので注意しておくべきところを紹介します

App.vueとLineChart.vueでのimportを見てみると、importするコンポーネントに{}をつけるかつけていないかの違いがあることが分かると思います

//App.vue
import LineChart from './LineChart'
//LineChart.vue
import { Line } from 'vue-chartjs'

例えば、LineChart.jsで{}を外すとグラフが表示されなくなってしまいます

正確にはまだ理解できていないのですが、コンポーネントのexport方法の違いによって、import方法も変わってくるみたいで、

• export defaultされているコンポーネントは{}なしでimport
• それ以外は{}ありでimport

なのかな？という解釈です
(有識者の方がいれば教えていただきたいです...)

参考

• vue-chartjs

  • Getting Started | 📈 vue-chartjs
  • vue-chartjs/src/examples at develop · apertureless/vue-chartjs
  • Line · Chart.js documentation
  • Bar · Chart.js documentation
  • vue-chartjs馴れ初め - Qiita
  • Chart.js 2.0でy軸の最大値(scales max)と最小値を設定する – joppot

• javascript

  • 連番の数字の配列を作成（es2015 ver) - Qiita
  • ES6の import / export - Qiita