Chart.jsのグラフをvue.jsを使って書いてみた1

Chart.jsを使った経緯

サイトのページにグラフを入れたいと依頼を受けて、
wpの管理画面でカスタムフィールドに値を入れてもらってそれをjsで拾って描画すればいいやーって実装しました。

それはお仕事でコード紹介できないから最近触り始めたvueで記事を書きます。

HTML

まずはCDNでchart.jsとvue.jsをサクッと読み込ませる

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

そしてhtmlに描画するcanvasを追加

index.html

<div id="app">
    <canvas id="chart"></canvas>
</div>

js

jsを書いていきます。
グラフに使用するデータを定義

    new Vue({
        el: '#app',
        data: {
            chartLists: [
                { name: 'たんぱく質', color: '#2ecc71', data: 10 },
                { name: '炭水化物', color: '#3498db', data: 30 },
                { name: 'ビタミンA', color: '#95a5a6', data: 3 },
                { name: 'ビタミンB', color: '#9b59b6', data: 17 }
            ]
        }
    });

そしてmethodsを書いていきます。

        methods: {
            listCategoryCreat: function (target) {
                //グラフを描画するために連想配列を普通の配列に変換
                var targetList = this.chartLists.map(function (arr) {
                    return [arr[target]]
                }).reduce(function (a, b) {
                    return a.concat(b);
                });

                return targetList;
            },
            creatChart: function () {
                var labelList = this.listCategoryCreat('name');
                var colorList = this.listCategoryCreat('color');
                var dataList = this.listCategoryCreat('data');

                //グラフ描画
                config = {
                    type: 'pie',
                    data: {
                        labels: labelList,
                        datasets: [{
                            backgroundColor: colorList,
                            data: dataList
                        }]
                    }
                };
                chart = new Chart(document.getElementById('chart').getContext('2d'), config);
            }
        }

まず

    listCategoryCreat: function (target) {
                //グラフを描画するために連想配列を普通の配列に変換
                var targetList = this.chartLists.map(function (arr) {
                    return [arr[target]]
                }).reduce(function (a, b) {
                    return a.concat(b);
                });
                return targetList;
            }

vueのdataにある「chartLists」が連想配列なので配列に変換してあげます。

配列にした要素をグラフの設定として「config」に入れてあげる。
そして描画をおこなう。

            creatChart: function () {
                var labelList = this.listCategoryCreat('name');
                var colorList = this.listCategoryCreat('color');
                var dataList = this.listCategoryCreat('data');

                //グラフ描画
                config = {
                    type: 'pie',
                    data: {
                        labels: labelList,
                        datasets: [{
                            backgroundColor: colorList,
                            data: dataList
                        }]
                    }
                };
                chart = new Chart(document.getElementById('chart').getContext('2d'), config);
            }

ページ読み込み時にmethodsを実行させてあげなきゃいけないのでmountedをします。

mounted: function () {
    //画面読み込み時に実行
    this.creatChart();
}

出来たものがこちらです
https://jsfiddle.net/dqnsan/5zrf6whv/

次はボタンを押下してグラフに要素を追加するを書きますー