teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問chart.jsでグラフがリアクティブに変更されない。

編集履歴

質問編集履歴

4

文章修正

2021/02/09 09:31

投稿

riki01
riki01

スコア10

test CHANGED
File without changes
test CHANGED
@@ -409,3 +409,9 @@
409
409
  こちら他のサイトでご質問してからしばらく時間が経ちましたのでここでも質問させて頂きました。
410
410
 
411
411
  ご了承下さいませ。
412
+
413
+ ↑こちらにつきましては余り好ましくない行為だと知らずしてしまいました。申し訳ありません。
414
+
415
+ 最初に投稿していたものは削除させて頂きました。
416
+
417
+ 宜しくお願い致します。

3

文章の修正です。

2021/02/09 09:31

投稿

riki01
riki01

スコア10

test CHANGED
File without changes
test CHANGED
@@ -406,6 +406,6 @@
406
406
 
407
407
 
408
408
 
409
- こちらのスタックオーバーフローの方でご質問してからしばらく時間が経ちましたので他の場所でも質問させて頂きました。
409
+ こちら他のサイトでご質問してからしばらく時間が経ちましたのでここでも質問させて頂きました。
410
410
 
411
411
  ご了承下さいませ。

2

文章修正

2021/02/09 07:49

投稿

riki01
riki01

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,35 +1,411 @@
1
- お世話になっております。
2
-
3
- 以下の課題が解決できず困っておりますので、どなたかご教示頂けますとありがたいです。
4
-
5
- ###課題
6
-
7
- vue-chart.jsのチャート図に値を渡す際に、1度リロードを挟まなければチャート図が更新されない。
8
-
9
- ###ゴール
10
-
11
- 送信ボタンを押すことで、トータル時間とチャート図の両方がリアルタイムで変更する様になる。
12
-
13
- ###試したこと
14
-
15
- [Main.vue138行目](https://github.com/yoshida-riki/TimeOverGrow-new/blob/4680f1b6b0b2bac721a9c4fca7de1fe4d6a41981/components/Main.vue#L138)
16
-
17
- で複数の変数に対してconsole.log() を挟みデバックを試みましたが、どこでおかしくなっているのか分かりませんでした。
18
-
19
- ###疑問点
20
-
21
- this.BarChartData.datasets[0] とthis.vuechartData[0] の扱いの違いが良くわかっておりません。
22
-
23
- リアクティブにチャート図を変更するならばthis.BarChartData.datasets[0] だけで十分だと思うのですが、this.vuechartData[0] に値を格納しなければチャート図自体が反映されなくなります。
24
-
25
-
26
-
27
- 曖昧な質問で申し訳ありませんが、かなり苦戦しておりますのでどなたかアドバイスして下さりますと幸いです。
28
-
29
-
30
-
31
- また、他のサイトで最初上記と同様のご質問をさせて頂きましたが、長時間たっても回答が得られなかった為こちらで同じ質問をさせて頂いております。
32
-
33
-
34
-
35
- 宜しくお願い致します。
1
+ vue-chart.jsでチャート図を表示している部分に関して、一旦リロードを挟まなければグラフが更新されない状況です。
2
+
3
+
4
+
5
+ 色々試してみたのですが、原因がわからず困っております。
6
+
7
+ もし宜しければご教示頂けないでしょうか？宜しくお願い致します。
8
+
9
+ ```
10
+
11
+ <template>
12
+
13
+ <div>
14
+
15
+ <client-only>
16
+
17
+ <v-row class="container d-flex justify-center">
18
+
19
+ <v-col cols="12" sm="6" md="5" class="p-0">
20
+
21
+ <TotalTime :times="times" />
22
+
23
+ </v-col>
24
+
25
+ <v-col v-if="initialLoaded" cols="12" sm="6" md="7" class="p-0">
26
+
27
+ <Chart :chart-data="BarChartData" :options="BarChartOptions" />
28
+
29
+ </v-col>
30
+
31
+ </v-row>
32
+
33
+ <TextBox :on-add="add" class="container" />
34
+
35
+ <Spinner v-if="!initialLoaded" class="container" />
36
+
37
+ <p v-else-if="initialLoaded && messages.length === 0" class="no-messages">毎日の積み上げ0件</p>
38
+
39
+ <MessageList :messages="reversedMessages" class="container" />
40
+
41
+ </client-only>
42
+
43
+ </div>
44
+
45
+ </template>
46
+
47
+
48
+
49
+ <script>
50
+
51
+ import MessageModel from '../models/Message'
52
+
53
+ import TotalTime from './TotalTime'
54
+
55
+ import Chart from './Chart'
56
+
57
+ import TextBox from './TextBox'
58
+
59
+ import Spinner from './Spinner'
60
+
61
+ import MessageList from './MessageList'
62
+
63
+
64
+
65
+ export default {
66
+
67
+ components: {
68
+
69
+ TotalTime,
70
+
71
+ Chart,
72
+
73
+ TextBox,
74
+
75
+ Spinner,
76
+
77
+ MessageList
78
+
79
+ },
80
+
81
+ data() {
82
+
83
+ return {
84
+
85
+ num: 0,
86
+
87
+ name: '',
88
+
89
+ index: '',
90
+
91
+ done: false,
92
+
93
+ messages: [],
94
+
95
+ vuechartData: [],
96
+
97
+ // options: {},
98
+
99
+ times: 0,
100
+
101
+ initialLoaded: false,
102
+
103
+ BarChartData: {
104
+
105
+ labels: ['学習時間'],
106
+
107
+ datasets: [
108
+
109
+ {
110
+
111
+ label: ['学習時間'],
112
+
113
+ data: [],
114
+
115
+ backgroundColor: ['rgba(54, 162, 235, 0.2)'],
116
+
117
+ borderColor: ['rgba(54, 162, 235, 1)']
118
+
119
+ }
120
+
121
+ ]
122
+
123
+ },
124
+
125
+ BarChartOptions: {
126
+
127
+ responsive: true,
128
+
129
+ maintainAspectRatio: false,
130
+
131
+ scales: {
132
+
133
+ xAxes: [
134
+
135
+ {
136
+
137
+ stacked: true,
138
+
139
+ scaleLabel: {
140
+
141
+ display: true,
142
+
143
+ labelString: ''
144
+
145
+ }
146
+
147
+ }
148
+
149
+ ],
150
+
151
+ yAxes: [
152
+
153
+ {
154
+
155
+ ticks: {
156
+
157
+ beginAtZero: true,
158
+
159
+ max: 1000,
160
+
161
+ stepSize: 100,
162
+
163
+ callback(label) {
164
+
165
+ return label + ' h'
166
+
167
+ }
168
+
169
+ }
170
+
171
+ }
172
+
173
+ ]
174
+
175
+ },
176
+
177
+ tooltips: {
178
+
179
+ callbacks: {
180
+
181
+ label(tooltipItem) {
182
+
183
+ return tooltipItem.yLabel + ' h'
184
+
185
+ }
186
+
187
+ }
188
+
189
+ }
190
+
191
+ }
192
+
193
+ }
194
+
195
+ },
196
+
197
+ computed: {
198
+
199
+ reversedMessages() {
200
+
201
+ return this.messages.slice().reverse()
202
+
203
+ }
204
+
205
+ },
206
+
207
+ async created() {
208
+
209
+ const messages = await this.fetchMessages()
210
+
211
+ const times = await this.totalTime()
212
+
213
+ const vuechartData = await this.getChart()
214
+
215
+
216
+
217
+ this.messages = messages
218
+
219
+ this.times = times
220
+
221
+
222
+
223
+ if (this.vuechartData.length === 0) {
224
+
225
+ this.vuechartData.push(vuechartData)
226
+
227
+ }
228
+
229
+ this.BarChartData.datasets[0].data[0] = vuechartData[0]
230
+
231
+ this.initialLoaded = true
232
+
233
+ },
234
+
235
+
236
+
237
+ methods: {
238
+
239
+ // async deleteMessage(message) {
240
+
241
+ // if (message !== undefined) {
242
+
243
+ // try {
244
+
245
+ // await this.messages.pop(message)
246
+
247
+ // await dbMessages.doc(message).delete()
248
+
249
+ // this.times = await MessageModel.dbtime()
250
+
251
+
252
+
253
+ // const vuechartData = await this.getChart()
254
+
255
+
256
+
257
+ // console.log(this.times);
258
+
259
+ // console.log(vuechartData[0]);
260
+
261
+ // console.log(this.BarChartData.datasets[0].data[0]);
262
+
263
+
264
+
265
+ // this.BarChartData.datasets[0].data[0] = await vuechartData[0]
266
+
267
+
268
+
269
+ // console.log(this.BarChartData.datasets[0].data[0]);
270
+
271
+ // } catch (error) {
272
+
273
+ // console.error(error)
274
+
275
+ // }
276
+
277
+ // } else {
278
+
279
+ // alert('削除する積み上げがありません。。。')
280
+
281
+ // }
282
+
283
+ // },
284
+
285
+ async add(message) {
286
+
287
+ this.messages.push(message)
288
+
289
+ this.times += message.time
290
+
291
+
292
+
293
+ const chartdbtime = await MessageModel.dbtime()
294
+
295
+ if (this.vuechartData.length === 0) {
296
+
297
+ this.vuechartData.push(chartdbtime)
298
+
299
+ }
300
+
301
+ console.log(chartdbtime)
302
+
303
+ console.log(this.BarChartData.datasets[0].data[0])
304
+
305
+ console.log(this.vuechartData)
306
+
307
+ this.BarChartData.datasets[0].data[0] = chartdbtime
308
+
309
+ this.vuechartData[0] = chartdbtime
310
+
311
+ },
312
+
313
+ async fetchMessages() {
314
+
315
+ try {
316
+
317
+ let messages = []
318
+
319
+ messages = await MessageModel.fetchMessages()
320
+
321
+ return messages
322
+
323
+ } catch (error) {
324
+
325
+ alert(error.message)
326
+
327
+ }
328
+
329
+ },
330
+
331
+ async totalTime() {
332
+
333
+ try {
334
+
335
+ let times = 0
336
+
337
+ const time = await MessageModel.dbtime()
338
+
339
+ times += time
340
+
341
+ return times
342
+
343
+ } catch (error) {
344
+
345
+ alert(error.message)
346
+
347
+ }
348
+
349
+ },
350
+
351
+ async getChart() {
352
+
353
+ try {
354
+
355
+ const chartdbtime = await MessageModel.dbtime()
356
+
357
+ if (this.BarChartData.datasets[0].data[0] === 0) {
358
+
359
+ this.vuechartData.push(chartdbtime)
360
+
361
+ }
362
+
363
+ this.vuechartData[0] = chartdbtime
364
+
365
+ return this.vuechartData
366
+
367
+ } catch (error) {
368
+
369
+ alert(error.message)
370
+
371
+ }
372
+
373
+ }
374
+
375
+ }
376
+
377
+ }
378
+
379
+ </script>
380
+
381
+
382
+
383
+ <style scoped>
384
+
385
+ .no-messages {
386
+
387
+ text-align: center;
388
+
389
+ }
390
+
391
+ .container {
392
+
393
+ max-width: 1300px;
394
+
395
+ margin: 0 auto;
396
+
397
+ }
398
+
399
+ </style>
400
+
401
+ ```
402
+
403
+
404
+
405
+ また、package.jsonではnuxt": "^2.14.12"となっております。
406
+
407
+
408
+
409
+ こちらのスタックオーバーフローの方でご質問してからしばらく時間が経ちましたので他の場所でも質問させて頂きました。
410
+
411
+ ご了承下さいませ。

1

文章の修正です。

2021/02/09 07:44

投稿

riki01
riki01

スコア10

test CHANGED
File without changes
test CHANGED
@@ -26,4 +26,10 @@
26
26
 
27
27
  曖昧な質問で申し訳ありませんが、かなり苦戦しておりますのでどなたかアドバイスして下さりますと幸いです。
28
28
 
29
+
30
+
31
+ また、他のサイトで最初上記と同様のご質問をさせて頂きましたが、長時間たっても回答が得られなかった為こちらで同じ質問をさせて頂いております。
32
+
33
+
34
+
29
35
  宜しくお願い致します。