teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問vue-chartjsでデータバインディングしたい。

編集履歴

質問編集履歴

4

修正

2020/01/10 02:39

投稿

toshihirokato
toshihirokato

スコア20

test CHANGED
File without changes
test CHANGED
File without changes

3

タイトルの変更

2020/01/10 02:39

投稿

toshihirokato
toshihirokato

スコア20

test CHANGED
@@ -1 +1 @@
1
- vue-chartjsでオブジェクト内配列の要素を繰り返し取得したい。
1
+ vue-chartjsでデータバインディングしたい。
test CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- Vue.jsのscriptタグ内の配列の要素を、繰り返し取得したい。
5
+ データのラベルを入力して送信するためのフォームを作成して、自動で最新の入力値を反映するチャートを作りたい。
6
-
7
-
8
-
6
+
7
+
8
+
9
- 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出して
9
+ その中で該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出して
10
10
 
11
11
  フォーム入力データバインディングがしたい。
12
12
 
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- addDataメソッド内で、オブジェクト内配列を指定できない。
19
+ addDataメソッド内で、オブジェクト内配列を指定してデータバインディングできない。
20
20
 
21
21
 
22
22
 
@@ -90,10 +90,6 @@
90
90
 
91
91
  :options="options"
92
92
 
93
- :bind="true"
94
-
95
- ●:labels="labels"
96
-
97
93
  />
98
94
 
99
95
  </div>
@@ -294,7 +290,17 @@
294
290
 
295
291
 
296
292
 
297
- data() {return {}} 内の chartData と結びつけることはできなかった。
293
+ data() {return {}} 内の chartData とバインディングすることはできなかった。
294
+
295
+
296
+
297
+ 以下のサイトを参考にしました。
298
+
299
+
300
+
301
+ [Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ](https://www.webprofessional.jp/creating-beautiful-charts-vue-chart-js/)
302
+
303
+
298
304
 
299
305
 
300
306
 

2

修正

2020/01/10 02:38

投稿

toshihirokato
toshihirokato

スコア20

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
 
8
8
 
9
- 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出してフォーム入力データバインディングがしたい。
9
+ 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出して
10
+
11
+ フォーム入力データバインディングがしたい。
10
12
 
11
13
 
12
14
 
@@ -14,7 +16,7 @@
14
16
 
15
17
 
16
18
 
17
- オブジェクト内配列を指定する方法がわからない。
19
+ addDataメソッド内で、オブジェクト内配列を指定できない。
18
20
 
19
21
 
20
22
 
@@ -284,7 +286,15 @@
284
286
 
285
287
 
286
288
 
287
- <script>タグ内に export const chartData = {} を指定することで、上記のエラー文は回避することができたが、data() {return {}} 内の chartData と結びつけることはできなかった。
289
+ <script>タグ内に export const chartData = {} を指定することで
290
+
291
+
292
+
293
+ error 'chartData' is not defined no-undef エラーは回避することができたが
294
+
295
+
296
+
297
+ data() {return {}} 内の chartData と結びつけることはできなかった。
288
298
 
289
299
 
290
300
 

1

追加記述

2020/01/07 23:58

投稿

toshihirokato
toshihirokato

スコア20

test CHANGED
File without changes
test CHANGED
@@ -2,21 +2,19 @@
2
2
 
3
3
 
4
4
 
5
- Vue.jsのscriptタグ内の配列の要素を、繰り返すために for in 文を使用したが以下のエラーが発生した。
5
+ Vue.jsのscriptタグ内の配列の要素を、繰り返し取得したい。
6
-
6
+
7
+
8
+
7
- 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出したい。
9
+ 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出してフォーム入力データバインディングがしたい。
8
-
9
-
10
-
10
+
11
+
12
+
11
- ### 発生している問題・エラーメッセージ
13
+ ### 発生している問題
12
-
13
-
14
-
15
- ```
14
+
16
-
15
+
16
+
17
- error 'chartData' is not defined no-undef
17
+ オブジェクト内配列を指定する方法がわからない。
18
-
19
- ```
20
18
 
21
19
 
22
20
 
@@ -24,10 +22,142 @@
24
22
 
25
23
 
26
24
 
25
+ ```
26
+
27
+ import { Radar, mixins } from 'vue-chartjs'
28
+
29
+
30
+
31
+ const { reactiveProp } = mixins
32
+
33
+
34
+
35
+ export default {
36
+
37
+ name: 'RadarChart',
38
+
27
- ```pagesradarvue
39
+ extends: Radar,
40
+
41
+ mixins: [reactiveProp],
42
+
43
+
44
+
45
+ props: {
46
+
47
+ chartData: {
48
+
49
+ type: Object,
50
+
51
+ default: null,
52
+
53
+ },
54
+
55
+ options: {
56
+
57
+ type: Object,
58
+
59
+ default: null
60
+
61
+ }
62
+
63
+ },
64
+
65
+ mounted () {
66
+
67
+ this.renderChart(this.chartData, this.options)
68
+
69
+ }
70
+
71
+ }
72
+
73
+
74
+
75
+ ```
76
+
77
+
78
+
79
+ ```
80
+
81
+ <template>
82
+
83
+ <div class="radar">
84
+
85
+ <radar-chart
86
+
87
+ :chart-data="chartData"
88
+
89
+ :options="options"
90
+
91
+ :bind="true"
92
+
93
+ ●:labels="labels"
94
+
95
+ />
96
+
97
+ </div>
98
+
99
+ <div class="form">
100
+
101
+ <h3>Input form</h3>
102
+
103
+ ●<form @submit.prevent="addData()">
104
+
105
+ <div class="separate">
106
+
107
+ <table>
108
+
109
+ <tbody>
110
+
111
+ <tr>
112
+
113
+ ●<td><input v-model="label1" class="first" type="text" placeholder="first"></td>
114
+
115
+ ●<td><input v-model="label2" class="second" type="text" placeholder="second"></td>
116
+
117
+ ●<td><input v-model="label3" class="third" type="text" placeholder="third"></td>
118
+
119
+ ●<td><input v-model="label4" class="forth" type="text" placeholder="forth"></td>
120
+
121
+ ●<td><input v-model="label5" class="fifth" type="text" placeholder="fifth"></td>
122
+
123
+ </tr></tr>
124
+
125
+ </tbody>
126
+
127
+ </table>
128
+
129
+ </div>
130
+
131
+ <div class="button">
132
+
133
+ ●<button type="submit">
134
+
135
+ submit
136
+
137
+ </button>
138
+
139
+ </div>
140
+
141
+ </form>
142
+
143
+ </div>
144
+
145
+ </template>
146
+
147
+
28
148
 
29
149
  <script>
30
150
 
151
+ import RadarChart from './RadarChart.js'
152
+
153
+
154
+
155
+ export const chartData = {}
156
+
157
+ export const labels = []
158
+
159
+
160
+
31
161
  export default {
32
162
 
33
163
  data () {
@@ -36,7 +166,7 @@
36
166
 
37
167
  chartData: {
38
168
 
39
- labels: ['a', 'b', 'c', 'd', 'e'],
169
+ ●labels: ['a', 'b', 'c', 'd', 'e'],
40
170
 
41
171
  datasets: [
42
172
 
@@ -128,7 +258,7 @@
128
258
 
129
259
  },
130
260
 
131
- methods: {
261
+ ●methods: {
132
262
 
133
263
  addData () {
134
264
 
@@ -160,7 +290,7 @@
160
290
 
161
291
  ### 補足情報（FW/ツールのバージョンなど）
162
292
 
163
-
293
+ ```
164
294
 
165
295
  {
166
296
 
@@ -235,3 +365,5 @@
235
365
  }
236
366
 
237
367
  }
368
+
369
+ ```