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/

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