teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問chart.jsを1ページ内に複数設置する方法

編集履歴

質問編集履歴

2

ショートコード部分の追記

2018/05/15 02:56

投稿

k1oi23s0hi
k1oi23s0hi

スコア6

test CHANGED
File without changes
test CHANGED
@@ -166,6 +166,18 @@
166
166
 
167
167
 
168
168
 
169
+ ### 投稿ページのheader内
170
+
171
+
172
+
173
+ ```html
174
+
175
+ [canvas id="radarChart"]
176
+
177
+ [canvas id="radarChart2"]
178
+
179
+ ```
180
+
169
181
  上記のようにしたのですが2個目のチャートのみが表示されています。
170
182
 
171
183
  理由がわからないので教えていただきたいです。

1

参考にした記事の貼付け,コードの整形

2018/05/15 02:56

投稿

k1oi23s0hi
k1oi23s0hi

スコア6

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- ```ここに言語名を入力
23
+ ```php
24
24
 
25
25
  function canvas_tag($atts){
26
26
 
@@ -54,7 +54,7 @@
54
54
 
55
55
 
56
56
 
57
- ```
57
+ ```php
58
58
 
59
59
  <body <?php body_class(); ?> onload="displayPieChart();">
60
60
 
@@ -66,107 +66,101 @@
66
66
 
67
67
 
68
68
 
69
- ```
69
+ ```javascript
70
70
 
71
- <script language="JavaScript">
71
+ <script language = "JavaScript" >
72
72
 
73
73
  function displayPieChart() {
74
74
 
75
- var data = {
75
+ var data = {
76
76
 
77
- labels: ["ああ", "いい", "うう", "ええ", "おお"],
77
+ labels: ["ああ", "いい", "うう", "ええ", "おお"],
78
78
 
79
- datasets: [
79
+ datasets: [{
80
80
 
81
- {
81
+ label: "商品名02",
82
82
 
83
- label: "商品名02",
83
+ fillColor: "rgba(200,0,0,0.2)",
84
84
 
85
- fillColor: "rgba(200,0,0,0.2)",
85
+ strokeColor: "red",
86
86
 
87
- strokeColor: "red",
87
+ pointColor: "red",
88
88
 
89
- pointColor: "red",
89
+ pointStrokeColor: "red",
90
90
 
91
- pointStrokeColor: "red",
91
+ pointHighlightFill: "red",
92
92
 
93
- pointHighlightFill: "red",
93
+ pointHighlightStroke: "red",
94
94
 
95
- pointHighlightStroke: "red",
95
+ data: [5, 5, 5, 5, 5]
96
96
 
97
- data: [5, 5, 5, 5, 5]
97
+ }]
98
98
 
99
- }
99
+ };
100
100
 
101
- ]
101
+ var ctx = document.getElementById("radarChart").getContext("2d");
102
102
 
103
- };
103
+ var options = {
104
104
 
105
- var ctx = document.getElementById("radarChart").getContext("2d");
105
+ legendTemplate: "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",
106
106
 
107
- var options = {
107
+ responsive: true,
108
108
 
109
- legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",responsive:true,
109
+ };
110
110
 
111
- };
111
+ var radarChart = new Chart(ctx).Radar(data, options);
112
112
 
113
- var radarChart = new Chart(ctx).Radar(data, options);
113
+ document.getElementById("info").innerHTML = radarChart.generateLegend();
114
114
 
115
- document.getElementById("info").innerHTML = radarChart.generateLegend();
116
-
117
- }
115
+ }
118
116
 
119
117
  </script>
120
118
 
121
- <script language="JavaScript">
119
+ <script language = "JavaScript" >
122
120
 
123
121
  function displayPieChart() {
124
122
 
125
- var data2 = {
123
+ var data2 = {
126
124
 
127
- labels: ["かか", "きき", "くく", "けけ", "ここ"],
125
+ labels: ["かか", "きき", "くく", "けけ", "ここ"],
128
126
 
129
- datasets: [
127
+ datasets: [{
130
128
 
131
- {
129
+ label: "商品名02",
132
130
 
133
- label: "商品名02",
131
+ fillColor: "rgba(200,0,0,0.2)",
134
132
 
135
- fillColor: "rgba(200,0,0,0.2)",
133
+ strokeColor: "red",
136
134
 
137
- strokeColor: "red",
135
+ pointColor: "red",
138
136
 
139
- pointColor: "red",
137
+ pointStrokeColor: "red",
140
138
 
141
- pointStrokeColor: "red",
139
+ pointHighlightFill: "red",
142
140
 
143
- pointHighlightFill: "red",
141
+ pointHighlightStroke: "red",
144
142
 
145
- pointHighlightStroke: "red",
143
+ data: [5, 5, 5, 5, 5]
146
144
 
147
- data: [5, 5, 5, 5, 5]
145
+ }]
148
146
 
149
- }
147
+ };
150
148
 
151
- ]
149
+ var ctx2 = document.getElementById("radarChart2").getContext("2d");
152
150
 
153
- };
151
+ var options2 = {
154
152
 
155
- var ctx2 = document.getElementById("radarChart2").getContext("2d");
153
+ legendTemplate: "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",
156
154
 
157
- var options2 = {
155
+ responsive: true,
158
156
 
159
- legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",responsive:true,
157
+ };
160
158
 
161
- };
159
+ var radarChart2 = new Chart(ctx2).Radar(data2, options2);
162
160
 
163
- var radarChart2 = new Chart(ctx2).Radar(data2, options2);
161
+ document.getElementById("info").innerHTML = radarChart2.generateLegend();
164
162
 
165
- document.getElementById("info").innerHTML = radarChart2.generateLegend();
166
-
167
- }
168
-
169
- </script>
163
+ } </script>
170
164
 
171
165
  ```
172
166
 
@@ -182,4 +176,8 @@
182
176
 
183
177
  コードはネットの記事を参考にしました。
184
178
 
179
+ [https://www.m-design.site/blog/wordpress/wordpress%E3%81%A7chart-js%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/](https://www.m-design.site/blog/wordpress/wordpress%E3%81%A7chart-js%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/)
180
+
181
+
182
+
185
183
  まだjavaScript勉強し始めたばかりなので、単純なことかもしれませんがご回答頂けると嬉しいです。