JSFiddle - React, Tailwind, and code Playground

by dqnsan

HTML

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

<div id="app">
	<canvas id="chart"></canvas>
	<form>
		<label>
			栄養名<input type="text" name="" v-model="nameSet" placeholder="例)ビタミンA">
		</label>
		<label>
			数値<input type="number" name="" v-model="numSet">
		</label>
		<input type="color" name="colorSet" value="" v-model="colorSet">
		<input type="button" value="追加" @click="addChartList()">
	</form>
</div>

JavaScript

new Vue({
		el: '#app',
		data: {
			nameSet: 'ビタミンZ',
			numSet: 10,
			colorSet: '#FFFF00',
			chartLists: [
				{ name: 'たんぱく質' ,color: '#2ecc71', data: 10 },
				{ name: '炭水化物' ,color: '#3498db', data: 30 },
				{ name: 'ビタミンA' ,color: '#95a5a6', data: 3 },
				{ name: 'ビタミンB' ,color: '#9b59b6', data: 17 }
			],
			btnDisabledFlag: true
		},
		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);
			},
			addChartList: function () {
				//forEachの中ではthisの対象が変わるためselfを使う
				self = this;

				//configの中にinputへ入力して値をpush
				config.data.labels.push(this.nameSet);
				config.data.datasets.forEach(function (dataset) {
					dataset.backgroundColor.push(self.colorSet);
					dataset.data.push(self.numSet);
				});

				//Chart.jsに存在するupdate関数を使用
				chart.update();

				//グラフに追加したらinputを初期状態に戻す
				this.nameSet = 'ビタミンZ';
				this.numSet = 10;
				this.colorSet = '#FFFF00';
			}
		},
		mounted: function () {
			//画面読み込み時に実行
			this.creatChart();
		}

	});