Chart.jsのy軸の目盛り(最大値と間隔)の条件分岐ができません

##行いたい実装

現在以下のMain.vueの様にChart.jsのy軸の目盛りの最大値を30、y軸の目盛りの間隔を3としております。

Main.vue

data() {
			return {
				BarChartOptions: {
					scales: {
						yAxes: [
							{
								ticks: {
									beginAtZero: true,
									max: [30],
									stepSize: [3],
									callback(label) {
										return label + ' h';
									}
								}
							}
						]
					}
					}
				}
			};
		},

こちらを条件分岐で値を変更したいです。

##試したこと

以下は上記と同ファイルのMain.vueです。
ここでtotalTimeというものを定義し（ここではtotalTime = 31です。）、条件分岐で、max: [30],stepSize: [3],のそれぞれの値を再代入することにより値の変更を行いました。

以下で確認ができます通り、console.log()ではきちんと値が入っていることが分かります。

Main.vue

methods: {
			// Chart図のメモリ変更処理
			async timeScales() {
				let totalTime = await MessageModel.dbtime();　// Number型
				let max = this.BarChartOptions.scales.yAxes[0].ticks.max;
				let step = this.BarChartOptions.scales.yAxes[0].ticks.stepSize;

				max = JSON.parse(JSON.stringify(max));
				step = JSON.parse(JSON.stringify(step));

　　　　　　　　　　　　　　　　　　　// はじめtotalTime = 0なので、max,stepへ値を代入

				console.log(totalTime); // 31

				if (30 <= totalTime) {
					console.log(max); // [30]
					console.log(step); // [3]

					max.pop();
					step.pop();
					max.push(50);
					step.push(5);

					console.log(max); // [50]
					console.log(step); // [5]
				}
			},

しかし何故かグラフはmax: [30],stepSize: [3]のままで全く変わりません。
どなたか原因がお分かり頂けますでしょうか？
何卒宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

解決案

下記のような別の変数の定義を行わず、this.BarChartOptions.scales.yAxes[0].ticks.max.pop()のように直接data()内の値を扱うことで改善すると考えられます。

Javascript
1let max = this.BarChartOptions.scales.yAxes[0].ticks.max;
2let step = this.BarChartOptions.scales.yAxes[0].ticks.stepSize;

グラフが更新されない原因

グラフが更新されない原因は、data()内の値が更新できていないことが原因の１つとなっているはずです。

Javascript
1max.pop();
2step.pop();
3max.push(50);
4step.push(5);

上記のようなコードは、あくまでmaxやstepの値を更新しているだけで、
本当に更新したい下記の値は更新できていません。
参照を渡した変数を更新すれば自動的に参照先の値も更新される、というわけではないということです。
this.BarChartOptions.scales.yAxes[0].ticks.max
this.BarChartOptions.scales.yAxes[0].ticks.stepSize

このことは、下記のようにコンソール出力した値を比べてみると良く分かるかなと思います。

Javascript
1console.log(max); // [50]
2console.log(this.BarChartOptions.scales.yAxes[0].ticks.max)
3console.log(step); // [5]
4console.log(this.BarChartOptions.scales.yAxes[0].ticks.stepSize)