chart.jsのvueラッパー「vue-chartjs」を使ってグラフを書く

個人的に作成しているLaravelアプリケーションで、canvasを使って円グラフを描画しているのですが、ジャギが出て汚いのでvue-chartjsを使った方法に切り替える事にした。

導入方法はサイトを見ていただくとして、実際に書いたコードがこんな感じ。
extendsでコンポーネントを継承してグラフの形式を指定している。
renderChart()にchartjsの仕様に沿ってdataとoptionsを渡せば良いっぽい。

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

    export default {
        extends : Pie, // グラフの形式
        props   : {
            val1     : {
                type: Number,
            },
            val2     : {
                type: Number,
            },
        },
        computed: {
            isEmpty() {
                return this.val1 === 0
                    && this.val2 === 0;
            },
            data() {
                const data = !this.isEmpty ? [
                    this.val1,
                    this.val2
                ] : [1, 1];

                return {
                    labels  : [
                        '選択肢A',
                        '選択肢B'
                    ],
                    datasets: [{
                        label          : '# of Votes',
                        data,
                        backgroundColor: [
                            'rgb(227, 64, 64)',
                            'rgb(64, 64, 227)',
                        ],
                        borderWidth    : 1
                    }]
                }
            },
            options() {
                return {
                }
            }
        },
        mounted() {
            this.renderChart(this.data, this.options)
        }
    }
</script>

<style>
</style>

こんな感じになる。

chartjsを使ったことがあるなら、vue-chartjsもすぐ使えると思います。
vue-chartjsの場合、dataの動的な変更にも対応している様です。