質問編集履歴

3

2016/05/08 16:15

投稿

SugiuraY
SugiuraY

スコア317

test CHANGED
File without changes
test CHANGED
@@ -1,283 +1,239 @@
1
- Javascriptで得変数をphpに渡したいのでが、これはできないのでしょうか?
1
+ 上記ご指摘をいだきました点を踏まえて、改めて状況と質問をさせてただきま
2
-
2
+
3
- 例えばすが
3
+ chart.jsを利用しており、以下のjsを外部ファイル化しております。ここ外部ファイル化しているのはWPのプラグインの性質上、所与のものであるとお考えください。
4
4
 
5
5
  ABC.js
6
6
 
7
+ ```
8
+
9
+ function bargraph(){
10
+
11
+
12
+
13
+
14
+
15
+ function floatFormat( number, n ) {
16
+
17
+ var _pow = Math.pow( 10 , n ) ;
18
+
19
+
20
+
21
+ return Math.round( number * _pow ) / _pow ;
22
+
23
+ }
24
+
25
+
26
+
27
+
28
+
29
+ var PO_1=5.0;
30
+
31
+ var PO_2=3.8;
32
+
33
+ var PO_3=floatFormat(78/100*5,1);
34
+
35
+ var PO_4=3.9;
36
+
37
+
38
+
39
+ function avg1()
40
+
41
+ {
42
+
43
+ return floatFormat(( PO_1+ PO_2+ PO_3+ PO_4)/4,1);
44
+
45
+ }
46
+
47
+ var PO_5= avg1;
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+ var data = {
56
+
57
+ labels: ["A", "B", "C", "D", "E",],
58
+
59
+ datasets: [
60
+
61
+ {label: "総合評価",
62
+
63
+ type:"bar",
64
+
65
+ yAxisID: 'y-axis-1',
66
+
67
+ backgroundColor: "rgba(0, 0, 255,0.3)",
68
+
69
+ borderColor: "rgba(0, 0, 255,0.3)",
70
+
71
+ borderWidth: 1,
72
+
73
+ hoverBackgroundColor: "rgba(255,99,132,0.4)",
74
+
75
+ hoverBorderColor: "rgba(255,99,132,1)",
76
+
77
+ data: [PO_1,PO_2, PO_3, PO_4, PO_5],},
78
+
79
+ { label: "口コミ数",
80
+
81
+ type:"line",
82
+
83
+ tension:0,
84
+
85
+ yAxisID: 'y-axis-2',
86
+
87
+ backgroundColor: "rgb(5, 34, 120)",
88
+
89
+ fill:false,
90
+
91
+ borderColor: "rgb(5, 34, 120)",
92
+
93
+ borderWidth: 1,
94
+
95
+ hoverBackgroundColor: "rgba(255,99,132,0.4)",
96
+
97
+ hoverBorderColor: "rgba(255,99,132,1)",
98
+
99
+ data: [700, 850, 300, 500, 680],}
100
+
101
+
102
+
103
+
104
+
105
+ ]};
106
+
107
+
108
+
109
+
110
+
111
+ var options={
112
+
113
+
114
+
115
+ scales: {
116
+
117
+ yAxes: [{
118
+
119
+ position: "left",
120
+
121
+ id: "y-axis-1",
122
+
123
+ ticks: {
124
+
125
+ fontColor:"#000000",
126
+
127
+ stepSize: 1,
128
+
129
+ beginAtZero:true,
130
+
131
+ callback: function(value) {
132
+
133
+ return "⭐️ "+value;}
134
+
135
+ },
136
+
137
+ gridLines:{display:true,
138
+
139
+ color:"rgba(0, 0, 255, 0.3)", },},
140
+
141
+ {
142
+
143
+ position: "right",
144
+
145
+ id: "y-axis-2",
146
+
147
+
148
+
149
+ ticks: {
150
+
151
+ fontColor:"#000000",
152
+
153
+ stepSize: 200,
154
+
155
+ beginAtZero:true,
156
+
157
+ },
158
+
159
+ gridLines:{display:true,
160
+
161
+ color:"rgba(0, 0, 255, 0.3)", },}
162
+
163
+ ],
164
+
165
+ xAxes: [{
166
+
167
+ tick:{
168
+
169
+ fontColor:"#808080 ",
170
+
171
+ fontSize:12,
172
+
173
+ },
174
+
175
+ gridLines:{display:true,color:"rgba(255, 255, 255, 0)"},
176
+
177
+
178
+
179
+ }]
180
+
181
+
182
+
183
+ }
184
+
185
+ };
186
+
187
+
188
+
189
+
190
+
191
+ var ctx = document.getElementById("mybar");
192
+
193
+ var myBarChart = new Chart(ctx, {
194
+
195
+ type: 'bar',
196
+
197
+ data: data,
198
+
199
+ options:options,
200
+
201
+ });
202
+
203
+ }
204
+
205
+
206
+
207
+ ```
208
+
209
+
210
+
211
+ 上記のABC.js上で得られたvar PO_5の変数を本体のphpファイルで様々な形で利用したいと考えております。例えば
212
+
213
+ DEF.php上
214
+
7
215
  ```ここに言語を入力
8
216
 
9
- var avg_1 =(a+b+c)/3;
217
+ <div class="subtitle" style="margin-bottom:20px; float: left; width:380px; align:left";><Font Size="5" style="color:#808080 ;">総合評価</Font>[star rating="<?php echo $AVG;?>" type="rating"]&nbsp;<?php echo "(".$AVG."/5.00)";?></br></div>
218
+
219
+ <!--chart.jsで得られた変数を利用して作成したいタグ、変数を受け渡しできない-->
220
+
221
+
222
+
223
+ div style="width:600px; height;200px"><canvas id="mybar" width="600px" height="200px"></canvas></div>
224
+
225
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.bundle.js"></script>
226
+
227
+ <script>
228
+
229
+ bargraph();
230
+
231
+ </script>
232
+
233
+ <!--chart.jsを利用したグラフを作成するタグ-->
10
234
 
11
235
  ```
12
236
 
13
- が得られていたとして、
14
-
15
- DEF.php
16
-
17
- ```ここに言語を入力
18
-
19
- <?php
20
-
21
- $AVG = '<script type="text/javascript" src="ABC.js">
22
-
23
- avg_1 ;
24
-
25
- </script>'
26
-
27
- ?
28
-
29
- <?php echo "(".$AVG."/5.00)";?>
30
-
31
- ```
32
-
33
-
34
-
35
- という塩梅にJavascriptで得られてvar avg_1をphpの$AVGに格納したいという趣旨になります。
36
-
37
- そもそもJavascriptはクライアントサイドで動く言語であるため、無理ではないかという記事も読んだのですが、どうしても(ライブラリを利用せざるえない都合上)javascript側の変数から引っ張ってくる必要があるのですが、上記のような方法が不可能であれば、一般的にどのようにデータを受け渡すべきがご教示いただけると幸いです。
38
-
39
-
40
-
41
- 初心者で誠に恐縮ですが、よろしくお願い申し上げます。
42
-
43
-
44
-
45
- 以下ご指摘をいただきました点を踏まえて、改めて状況と質問をさせていただきます。
46
-
47
- chart.jsを利用しており、以下のjsを外部ファイル化しております。ここで外部ファイル化しているのは、WPのプラグインの性質上、所与のものであるとお考えください。
48
-
49
- ABC.js
50
-
51
- ```
52
-
53
- function bargraph(){
54
-
55
-
56
-
57
-
58
-
59
- function floatFormat( number, n ) {
60
-
61
- var _pow = Math.pow( 10 , n ) ;
62
-
63
-
64
-
65
- return Math.round( number * _pow ) / _pow ;
66
-
67
- }
68
-
69
-
70
-
71
-
72
-
73
- var PO_1=5.0;
74
-
75
- var PO_2=3.8;
76
-
77
- var PO_3=floatFormat(78/100*5,1);
78
-
79
- var PO_4=3.9;
80
-
81
-
82
-
83
- function avg1()
84
-
85
- {
86
-
87
- return floatFormat(( PO_1+ PO_2+ PO_3+ PO_4)/4,1);
88
-
89
- }
90
-
91
- var PO_5= avg1;
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
- var data = {
100
-
101
- labels: ["A", B", "C", "D", "E",],
102
-
103
- datasets: [
104
-
105
- {label: "総合評価",
106
-
107
- type:"bar",
108
-
109
- yAxisID: 'y-axis-1',
110
-
111
- backgroundColor: "rgba(0, 0, 255,0.3)",
112
-
113
- borderColor: "rgba(0, 0, 255,0.3)",
114
-
115
- borderWidth: 1,
116
-
117
- hoverBackgroundColor: "rgba(255,99,132,0.4)",
118
-
119
- hoverBorderColor: "rgba(255,99,132,1)",
120
-
121
- data: [PO_1,PO_2, PO_3, PO_4, PO_5],},
122
-
123
- { label: "口コミ数",
124
-
125
- type:"line",
126
-
127
- tension:0,
128
-
129
- yAxisID: 'y-axis-2',
130
-
131
- backgroundColor: "rgb(5, 34, 120)",
132
-
133
- fill:false,
134
-
135
- borderColor: "rgb(5, 34, 120)",
136
-
137
- borderWidth: 1,
138
-
139
- hoverBackgroundColor: "rgba(255,99,132,0.4)",
140
-
141
- hoverBorderColor: "rgba(255,99,132,1)",
142
-
143
- data: [700, 850, 300, 500, 680],}
144
-
145
-
146
-
147
-
148
-
149
- ]};
150
-
151
-
152
-
153
-
154
-
155
- var options={
156
-
157
-
158
-
159
- scales: {
160
-
161
- yAxes: [{
162
-
163
- position: "left",
164
-
165
- id: "y-axis-1",
166
-
167
- ticks: {
168
-
169
- fontColor:"#000000",
170
-
171
- stepSize: 1,
172
-
173
- beginAtZero:true,
174
-
175
- callback: function(value) {
176
-
177
- return "⭐️ "+value;}
178
-
179
- },
180
-
181
- gridLines:{display:true,
182
-
183
- color:"rgba(0, 0, 255, 0.3)", },},
184
-
185
- {
186
-
187
- position: "right",
188
-
189
- id: "y-axis-2",
190
-
191
-
192
-
193
- ticks: {
194
-
195
- fontColor:"#000000",
196
-
197
- stepSize: 200,
198
-
199
- beginAtZero:true,
200
-
201
- },
202
-
203
- gridLines:{display:true,
204
-
205
- color:"rgba(0, 0, 255, 0.3)", },}
206
-
207
- ],
208
-
209
- xAxes: [{
210
-
211
- tick:{
212
-
213
- fontColor:"#808080 ",
214
-
215
- fontSize:12,
216
-
217
- },
218
-
219
- gridLines:{display:true,color:"rgba(255, 255, 255, 0)"},
220
-
221
-
222
-
223
- }]
224
-
225
-
226
-
227
- }
228
-
229
- };
230
-
231
-
232
-
233
-
234
-
235
- var ctx = document.getElementById("mybar");
236
-
237
- var myBarChart = new Chart(ctx, {
238
-
239
- type: 'bar',
240
-
241
- data: data,
242
-
243
- options:options,
244
-
245
- });
246
-
247
- }
248
-
249
-
250
-
251
- ```
252
-
253
-
254
-
255
- 上記のABC.js上で得られたvar PO_5の変数を本体のphpファイルで様々な形で利用したいと考えております。例えば
256
-
257
- BCD.php上
258
-
259
- ```ここに言語を入力
260
-
261
- <div class="subtitle" style="margin-bottom:20px; float: left; width:380px; align:left";><Font Size="5" style="color:#808080 ;">総合評価</Font>[star rating="<?php echo $AVG;?>" type="rating"]&nbsp;<?php echo "(".$AVG."/5.00)";?></br></div>
262
-
263
- <!--chart.jsで得られた変数を利用して作成したいタグ、変数を受け渡しできない-->
264
-
265
-
266
-
267
- div style="width:600px; height;200px"><canvas id="mybar" width="600px" height="200px"></canvas></div>
268
-
269
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.bundle.js"></script>
270
-
271
- <script>
272
-
273
- bargraph();
274
-
275
- </script>
276
-
277
- <!--chart.jsを利用したグラフを作成するタグ-->
278
-
279
- ```
280
-
281
237
  *ちなみに[star...のコードはWP上のショートコードになります。
282
238
 
283
239
 

2

誤字

2016/05/08 16:15

投稿

SugiuraY
SugiuraY

スコア317

test CHANGED
File without changes
test CHANGED
@@ -92,8 +92,6 @@
92
92
 
93
93
 
94
94
 
95
- var avg_1 =(a+b+c)/3;
96
-
97
95
 
98
96
 
99
97
 

1

ご指摘を踏まえて加筆いたしました。

2016/05/08 15:58

投稿

SugiuraY
SugiuraY

スコア317

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,263 @@
39
39
 
40
40
 
41
41
  初心者で誠に恐縮ですが、よろしくお願い申し上げます。
42
+
43
+
44
+
45
+ 以下ご指摘をいただきました点を踏まえて、改めて状況と質問をさせていただきます。
46
+
47
+ chart.jsを利用しており、以下のjsを外部ファイル化しております。ここで外部ファイル化しているのは、WPのプラグインの性質上、所与のものであるとお考えください。
48
+
49
+ ABC.js
50
+
51
+ ```
52
+
53
+ function bargraph(){
54
+
55
+
56
+
57
+
58
+
59
+ function floatFormat( number, n ) {
60
+
61
+ var _pow = Math.pow( 10 , n ) ;
62
+
63
+
64
+
65
+ return Math.round( number * _pow ) / _pow ;
66
+
67
+ }
68
+
69
+
70
+
71
+
72
+
73
+ var PO_1=5.0;
74
+
75
+ var PO_2=3.8;
76
+
77
+ var PO_3=floatFormat(78/100*5,1);
78
+
79
+ var PO_4=3.9;
80
+
81
+
82
+
83
+ function avg1()
84
+
85
+ {
86
+
87
+ return floatFormat(( PO_1+ PO_2+ PO_3+ PO_4)/4,1);
88
+
89
+ }
90
+
91
+ var PO_5= avg1;
92
+
93
+
94
+
95
+ var avg_1 =(a+b+c)/3;
96
+
97
+
98
+
99
+
100
+
101
+ var data = {
102
+
103
+ labels: ["A", B", "C", "D", "E",],
104
+
105
+ datasets: [
106
+
107
+ {label: "総合評価",
108
+
109
+ type:"bar",
110
+
111
+ yAxisID: 'y-axis-1',
112
+
113
+ backgroundColor: "rgba(0, 0, 255,0.3)",
114
+
115
+ borderColor: "rgba(0, 0, 255,0.3)",
116
+
117
+ borderWidth: 1,
118
+
119
+ hoverBackgroundColor: "rgba(255,99,132,0.4)",
120
+
121
+ hoverBorderColor: "rgba(255,99,132,1)",
122
+
123
+ data: [PO_1,PO_2, PO_3, PO_4, PO_5],},
124
+
125
+ { label: "口コミ数",
126
+
127
+ type:"line",
128
+
129
+ tension:0,
130
+
131
+ yAxisID: 'y-axis-2',
132
+
133
+ backgroundColor: "rgb(5, 34, 120)",
134
+
135
+ fill:false,
136
+
137
+ borderColor: "rgb(5, 34, 120)",
138
+
139
+ borderWidth: 1,
140
+
141
+ hoverBackgroundColor: "rgba(255,99,132,0.4)",
142
+
143
+ hoverBorderColor: "rgba(255,99,132,1)",
144
+
145
+ data: [700, 850, 300, 500, 680],}
146
+
147
+
148
+
149
+
150
+
151
+ ]};
152
+
153
+
154
+
155
+
156
+
157
+ var options={
158
+
159
+
160
+
161
+ scales: {
162
+
163
+ yAxes: [{
164
+
165
+ position: "left",
166
+
167
+ id: "y-axis-1",
168
+
169
+ ticks: {
170
+
171
+ fontColor:"#000000",
172
+
173
+ stepSize: 1,
174
+
175
+ beginAtZero:true,
176
+
177
+ callback: function(value) {
178
+
179
+ return "⭐️ "+value;}
180
+
181
+ },
182
+
183
+ gridLines:{display:true,
184
+
185
+ color:"rgba(0, 0, 255, 0.3)", },},
186
+
187
+ {
188
+
189
+ position: "right",
190
+
191
+ id: "y-axis-2",
192
+
193
+
194
+
195
+ ticks: {
196
+
197
+ fontColor:"#000000",
198
+
199
+ stepSize: 200,
200
+
201
+ beginAtZero:true,
202
+
203
+ },
204
+
205
+ gridLines:{display:true,
206
+
207
+ color:"rgba(0, 0, 255, 0.3)", },}
208
+
209
+ ],
210
+
211
+ xAxes: [{
212
+
213
+ tick:{
214
+
215
+ fontColor:"#808080 ",
216
+
217
+ fontSize:12,
218
+
219
+ },
220
+
221
+ gridLines:{display:true,color:"rgba(255, 255, 255, 0)"},
222
+
223
+
224
+
225
+ }]
226
+
227
+
228
+
229
+ }
230
+
231
+ };
232
+
233
+
234
+
235
+
236
+
237
+ var ctx = document.getElementById("mybar");
238
+
239
+ var myBarChart = new Chart(ctx, {
240
+
241
+ type: 'bar',
242
+
243
+ data: data,
244
+
245
+ options:options,
246
+
247
+ });
248
+
249
+ }
250
+
251
+
252
+
253
+ ```
254
+
255
+
256
+
257
+ 上記のABC.js上で得られたvar PO_5の変数を本体のphpファイルで様々な形で利用したいと考えております。例えば
258
+
259
+ BCD.php上
260
+
261
+ ```ここに言語を入力
262
+
263
+ <div class="subtitle" style="margin-bottom:20px; float: left; width:380px; align:left";><Font Size="5" style="color:#808080 ;">総合評価</Font>[star rating="<?php echo $AVG;?>" type="rating"]&nbsp;<?php echo "(".$AVG."/5.00)";?></br></div>
264
+
265
+ <!--chart.jsで得られた変数を利用して作成したいタグ、変数を受け渡しできない-->
266
+
267
+
268
+
269
+ div style="width:600px; height;200px"><canvas id="mybar" width="600px" height="200px"></canvas></div>
270
+
271
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.bundle.js"></script>
272
+
273
+ <script>
274
+
275
+ bargraph();
276
+
277
+ </script>
278
+
279
+ <!--chart.jsを利用したグラフを作成するタグ-->
280
+
281
+ ```
282
+
283
+ *ちなみに[star...のコードはWP上のショートコードになります。
284
+
285
+
286
+
287
+ $AVGにABC.jsのPO_5の変数を渡すことができず、その解決策を探しています。
288
+
289
+ DEF.phpの記載は一部ですが、様々な形でPO_5の変数をDEF.phpで使用したく考えております。
290
+
291
+
292
+
293
+ もちろん先のPHPファイルに変数を宣言して、これを外部jsファイルに受け渡すことができればそれも有効な解決策と考えております。
294
+
295
+
296
+
297
+ このような形での質問であればいかがでしょうか?
298
+
299
+
300
+
301
+ 何卒、よろしくお願い申し上げます。