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

編集履歴

質問編集履歴

4

修正

2020/01/10 02:39

投稿

toshihirokato
toshihirokato

スコア20

title CHANGED
File without changes
body CHANGED
File without changes

3

タイトルの変更

2020/01/10 02:39

投稿

toshihirokato
toshihirokato

スコア20

title CHANGED
@@ -1,1 +1,1 @@
1
- vue-chartjsでオブジェクト内配列の要素を繰り返し取得したい。
1
+ vue-chartjsでデータバインディングしたい。
body CHANGED
@@ -1,13 +1,13 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- Vue.jsのscriptタグ内の配列の要素を、繰り返し取得したい。
3
+ データのラベルを入力して送信するためのフォームを作成して、自動で最新の入力値を反映するチャートを作りたい。
4
4
 
5
- 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出して
5
+ その中で該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出して
6
6
  フォーム入力データバインディングがしたい。
7
7
 
8
8
  ### 発生している問題
9
9
 
10
- addDataメソッド内で、オブジェクト内配列を指定できない。
10
+ addDataメソッド内で、オブジェクト内配列を指定してデータバインディングできない。
11
11
 
12
12
  ### 該当のソースコード
13
13
 
@@ -44,8 +44,6 @@
44
44
  <radar-chart
45
45
  :chart-data="chartData"
46
46
  :options="options"
47
- :bind="true"
48
- ●:labels="labels"
49
47
  />
50
48
  </div>
51
49
  <div class="form">
@@ -146,8 +144,13 @@
146
144
 
147
145
  error 'chartData' is not defined no-undef エラーは回避することができたが
148
146
 
149
- data() {return {}} 内の chartData と結びつけることはできなかった。
147
+ data() {return {}} 内の chartData とバインディングすることはできなかった。
150
148
 
149
+ 以下のサイトを参考にしました。
150
+
151
+ [Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ](https://www.webprofessional.jp/creating-beautiful-charts-vue-chart-js/)
152
+
153
+
151
154
  ### 補足情報（FW/ツールのバージョンなど）
152
155
  ```
153
156
  {

2

修正

2020/01/10 02:38

投稿

toshihirokato
toshihirokato

スコア20

title CHANGED
File without changes
body CHANGED
@@ -2,11 +2,12 @@
2
2
 
3
3
  Vue.jsのscriptタグ内の配列の要素を、繰り返し取得したい。
4
4
 
5
- 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出してフォーム入力データバインディングがしたい。
5
+ 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出して
6
+ フォーム入力データバインディングがしたい。
6
7
 
7
8
  ### 発生している問題
8
9
 
9
- オブジェクト内配列を指定する方法がわからない。
10
+ addDataメソッド内で、オブジェクト内配列を指定できない。
10
11
 
11
12
  ### 該当のソースコード
12
13
 
@@ -141,8 +142,12 @@
141
142
 
142
143
  ### 試したこと
143
144
 
144
- <script>タグ内に export const chartData = {} を指定することで、上記のエラー文は回避することができたが、data() {return {}} 内の chartData と結びつけることはできなかった。
145
+ <script>タグ内に export const chartData = {} を指定することで
145
146
 
147
+ error 'chartData' is not defined no-undef エラーは回避することができたが
148
+
149
+ data() {return {}} 内の chartData と結びつけることはできなかった。
150
+
146
151
  ### 補足情報（FW/ツールのバージョンなど）
147
152
  ```
148
153
  {

1

追加記述

2020/01/07 23:58

投稿

toshihirokato
toshihirokato

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,23 +1,88 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- Vue.jsのscriptタグ内の配列の要素を、繰り返すために for in 文を使用したが以下のエラーが発生した。
3
+ Vue.jsのscriptタグ内の配列の要素を、繰り返し取得したい。
4
- 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出したい。
5
4
 
6
- ### 発生している問題・エラーメッセージ
5
+ 具体的には、該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出してフォーム入力データバインディングがしたい。
7
6
 
7
+ ### 発生している問題
8
+
9
+ オブジェクト内配列を指定する方法がわからない。
10
+
11
+ ### 該当のソースコード
12
+
8
13
  ```
14
+ import { Radar, mixins } from 'vue-chartjs'
15
+
16
+ const { reactiveProp } = mixins
17
+
18
+ export default {
19
+ name: 'RadarChart',
20
+ extends: Radar,
21
+ mixins: [reactiveProp],
22
+
23
+ props: {
24
+ chartData: {
25
+ type: Object,
26
+ default: null,
27
+ },
28
+ options: {
29
+ type: Object,
30
+ default: null
31
+ }
32
+ },
33
+ mounted () {
9
- error 'chartData' is not defined no-undef
34
+ this.renderChart(this.chartData, this.options)
35
+ }
36
+ }
37
+
10
38
  ```
11
39
 
40
+ ```
41
+ <template>
42
+ <div class="radar">
43
+ <radar-chart
44
+ :chart-data="chartData"
45
+ :options="options"
46
+ :bind="true"
47
+ ●:labels="labels"
48
+ />
49
+ </div>
50
+ <div class="form">
51
+ <h3>Input form</h3>
52
+ ●<form @submit.prevent="addData()">
53
+ <div class="separate">
12
- ### 該当のソースコード
54
+ <table>
55
+ <tbody>
56
+ <tr>
57
+ ●<td><input v-model="label1" class="first" type="text" placeholder="first"></td>
58
+ ●<td><input v-model="label2" class="second" type="text" placeholder="second"></td>
59
+ ●<td><input v-model="label3" class="third" type="text" placeholder="third"></td>
60
+ ●<td><input v-model="label4" class="forth" type="text" placeholder="forth"></td>
61
+ ●<td><input v-model="label5" class="fifth" type="text" placeholder="fifth"></td>
62
+ </tr></tr>
63
+ </tbody>
64
+ </table>
65
+ </div>
66
+ <div class="button">
67
+ ●<button type="submit">
68
+ submit
69
+ </button>
70
+ </div>
71
+ </form>
72
+ </div>
73
+ </template>
13
74
 
14
- ```pagesradarvue
15
75
  <script>
76
+ import RadarChart from './RadarChart.js'
77
+
78
+ export const chartData = {}
79
+ export const labels = []
80
+
16
81
  export default {
17
82
  data () {
18
83
  return {
19
84
  chartData: {
20
- labels: ['a', 'b', 'c', 'd', 'e'],
85
+ ●labels: ['a', 'b', 'c', 'd', 'e'],
21
86
  datasets: [
22
87
  {
23
88
  backgroundColor: 'rgba(255, 204, 0, 0.4)',
@@ -63,7 +128,7 @@
63
128
  }
64
129
  }
65
130
  },
66
- methods: {
131
+ ●methods: {
67
132
  addData () {
68
133
  for (const key in chartData.labels) {
69
134
  console.log(key)
@@ -79,7 +144,7 @@
79
144
  <script>タグ内に export const chartData = {} を指定することで、上記のエラー文は回避することができたが、data() {return {}} 内の chartData と結びつけることはできなかった。
80
145
 
81
146
  ### 補足情報（FW/ツールのバージョンなど）
82
-
147
+ ```
83
148
  {
84
149
  "name": "",
85
150
  "version": "1.0.0",
@@ -116,4 +181,5 @@
116
181
  "eslint": "^6.7.2",
117
182
  "eslint-plugin-nuxt": ">=0.5.0"
118
183
  }
119
- }
184
+ }
185
+ ```