chart.jsでグラフがリアクティブに変更されない。

Question

vue-chart.jsでチャート図を表示している部分に関して、一旦リロードを挟まなければグラフが更新されない状況です。

色々試してみたのですが、原因がわからず困っております。
もし宜しければご教示頂けないでしょうか？宜しくお願い致します。

<template>
	<div>
		<client-only>
			<v-row class="container d-flex justify-center">
				<v-col cols="12" sm="6" md="5" class="p-0">
					<TotalTime :times="times" />
				</v-col>
				<v-col v-if="initialLoaded" cols="12" sm="6" md="7" class="p-0">
					<Chart :chart-data="BarChartData" :options="BarChartOptions" />
				</v-col>
			</v-row>
			<TextBox :on-add="add" class="container" />
			<Spinner v-if="!initialLoaded" class="container" />
			<p v-else-if="initialLoaded && messages.length === 0" class="no-messages">毎日の積み上げ0件</p>
			<MessageList :messages="reversedMessages" class="container" />
		</client-only>
	</div>
</template>

<script>
	import MessageModel from '../models/Message'
	import TotalTime from './TotalTime'
	import Chart from './Chart'
	import TextBox from './TextBox'
	import Spinner from './Spinner'
	import MessageList from './MessageList'

	export default {
		components: {
			TotalTime,
			Chart,
			TextBox,
			Spinner,
			MessageList
		},
		data() {
			return {
				num: 0,
				name: '',
				index: '',
				done: false,
				messages: [],
				vuechartData: [],
				// options: {},
				times: 0,
				initialLoaded: false,
				BarChartData: {
					labels: ['学習時間'],
					datasets: [
						{
							label: ['学習時間'],
							data: [],
							backgroundColor: ['rgba(54, 162, 235, 0.2)'],
							borderColor: ['rgba(54, 162, 235, 1)']
						}
					]
				},
				BarChartOptions: {
					responsive: true,
					maintainAspectRatio: false,
					scales: {
						xAxes: [
							{
								stacked: true,
								scaleLabel: {
									display: true,
									labelString: ''
								}
							}
						],
						yAxes: [
							{
								ticks: {
									beginAtZero: true,
									max: 1000,
									stepSize: 100,
									callback(label) {
										return label + ' h'
									}
								}
							}
						]
					},
					tooltips: {
						callbacks: {
							label(tooltipItem) {
								return tooltipItem.yLabel + ' h'
							}
						}
					}
				}
			}
		},
		computed: {
			reversedMessages() {
				return this.messages.slice().reverse()
			}
		},
		async created() {
			const messages = await this.fetchMessages()
			const times = await this.totalTime()
			const vuechartData = await this.getChart()

			this.messages = messages
			this.times = times

			if (this.vuechartData.length === 0) {
				this.vuechartData.push(vuechartData)
			}
			this.BarChartData.datasets[0].data[0] = vuechartData[0]
			this.initialLoaded = true
		},

		methods: {
			// async deleteMessage(message) {
			// 	if (message !== undefined) {
			// 		try {
			// 			await this.messages.pop(message)
			// 			await dbMessages.doc(message).delete()
			// 			this.times = await MessageModel.dbtime()

			// 			const vuechartData = await this.getChart()

			// 			console.log(this.times);
			// 			console.log(vuechartData[0]);
			// 			console.log(this.BarChartData.datasets[0].data[0]);

			// 			this.BarChartData.datasets[0].data[0] = await vuechartData[0]

			// 			console.log(this.BarChartData.datasets[0].data[0]);
			// 		} catch (error) {
			// 			console.error(error)
			// 		}
			// 	} else {
			// 		alert('削除する積み上げがありません。。。')
			// 	}
			// },
			async add(message) {
				this.messages.push(message)
				this.times += message.time

				const chartdbtime = await MessageModel.dbtime()
				if (this.vuechartData.length === 0) {
					this.vuechartData.push(chartdbtime)
				}
				console.log(chartdbtime)
				console.log(this.BarChartData.datasets[0].data[0])
				console.log(this.vuechartData)
				this.BarChartData.datasets[0].data[0] = chartdbtime
				this.vuechartData[0] = chartdbtime
			},
			async fetchMessages() {
				try {
					let messages = []
					messages = await MessageModel.fetchMessages()
					return messages
				} catch (error) {
					alert(error.message)
				}
			},
			async totalTime() {
				try {
					let times = 0
					const time = await MessageModel.dbtime()
					times += time
					return times
				} catch (error) {
					alert(error.message)
				}
			},
			async getChart() {
				try {
					const chartdbtime = await MessageModel.dbtime()
					if (this.BarChartData.datasets[0].data[0] === 0) {
						this.vuechartData.push(chartdbtime)
					}
					this.vuechartData[0] = chartdbtime
					return this.vuechartData
				} catch (error) {
					alert(error.message)
				}
			}
		}
	}
</script>

<style scoped>
	.no-messages {
		text-align: center;
	}
	.container {
		max-width: 1300px;
		margin: 0 auto;
	}
</style>

また、package.jsonではnuxt": "^2.14.12"となっております。

こちら他のサイトでご質問してからしばらく時間が経ちましたのでここでも質問させて頂きました。
ご了承下さいませ。
↑こちらにつきましては余り好ましくない行為だと知らずしてしまいました。申し訳ありません。
最初に投稿していたものは削除させて頂きました。
宜しくお願い致します。

Comments

[1T2R3M4]

他サイトってこれですか。
https://ja.stackoverflow.com/questions/73864
情報が追加されているようですが、こちらには反映しないのでしょうか。

[riki01]

1T2R3M4さん
ご指摘ありがとうございます！
改善いたしました！

[riki01]

1T2R3M4さん
すみません他サイトで同時に質問すること自体悪い行為だと知りませんでした。
https://ja.stackoverflow.com/questions/73864
こちらの方での募集は削除させて頂きました。
引き続き宜しくお願い致します。

Answer 1

こちら自己解決致しました。

methods: {
			add(message) {
				this.messages.push(message)
				this.times += message.time

				const chartdbtime = message.time
				if (this.BarChartData.datasets[0].data.length === 0) {
					this.BarChartData.datasets[0].data.push(chartdbtime)
				}

				console.log(this.BarChartData.datasets[0].data[0])
				console.log(this.vuechartData[0])

				this.BarChartData.datasets[0].data[0] += chartdbtime
				// this.vuechartData[0] += chartdbtime

				// もう1度作り直さないといけない。
				this.BarChartData = {
					datasets: [
						{
							label: ['学習時間'],
							data: [this.vuechartData[0] + chartdbtime],
							backgroundColor: ['rgba(54, 162, 235, 0.2)'],
							borderColor: ['rgba(54, 162, 235, 1)']
						}
					]
				}

				console.log('ここからクリックイベント')
				console.log(chartdbtime)
				console.log(this.BarChartData.datasets[0].data[0])
				console.log(this.vuechartData)
				console.log(this.vuechartData[0])
				console.log('ここで終了')
			},

vue-chart.jsの使用上this.BarChartData.datasets[0].data[0]とするよりもaddクリックイベントの際にもう1度チャート図を作り直すことでリアクティブに動く様になりました。

かなり強引なやり方だとは思うのでご参考までにお願いします。