質問編集履歴

5

質問の内1つは回答を得られましたので現時点での最終コードを載せました。

2018/11/06 03:48

投稿

s.kono
s.kono

スコア37

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,35 @@
20
20
 
21
21
 
22
22
 
23
+ 頂いた回答を参考にphpのオブジェクトをjavascriptのなかで次のようにセットしてみました。~~エラーにはなりませんが意図したグラフが描けないのは何が足りなくてそうなっているのか分かりません~~。原因分かりました
24
+
25
+ →var options_fullStacked = {opt};誤り
26
+
27
+  var options_fullStacked =opt;正しい
28
+
29
+
30
+
31
+ 下のコードは100% stacked chartではなく、普通のstacked chartですがオブジェクトの受け渡し方がおかげさまで理解できましたので最終形として載せます。bodyでもheadでもページ読み込み時にこのコードですとグラフが表示されるようです。
32
+
33
+ 動的にChartを変更するのも簡単ではなさそうですが、こちらを参考に機会があれば作ってみようと思います。
34
+
35
+ * https://developers.google.com/chart/interactive/docs/basic_interactivity
36
+
37
+
38
+
39
+ またPHPのオブジェクトをjavascriptの関数の引数として受け渡す方法も分かりましたのでGoogle Chartではないですがコードを載せます。
40
+
41
+
42
+
43
+ GoogleChartの場合引数渡しはなぜか同じコードを書いてもうまくいきませんでした、おそらくcallbackや他の仕様とも関係ありそうで奥が深そうなので今回はPHP側でsubプロシジャーを呼ぶ形で作る方法を取りたいと思います。
44
+
45
+
46
+
47
+ 回答ありがとうございました。
48
+
49
+
50
+
23
- ```php
51
+ ```PHP
24
52
 
25
53
  <?php
26
54
 
@@ -32,17 +60,109 @@
32
60
 
33
61
  */
34
62
 
35
- $datas=array();
63
+ $datas = array();
64
+
36
-
65
+ $roles = new stdClass;
66
+
67
+ $roles->role = 'annotation';
68
+
37
- $datas[]=array('Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature');
69
+ $datas[]=array('Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature',$roles);
38
-
70
+
39
- $datas[]=array('2010', 10, 24, 20, 32, 18, 5);
71
+ $datas[]=array('2010', 10, 24, 20, 32, 18, 5,'');
40
-
72
+
41
- $datas[]=array('2020', 16, 22, 23, 30, 16, 9);
73
+ $datas[]=array('2020', 16, 22, 23, 30, 16, 9,'');
42
-
74
+
43
- $datas[]=array('2030', 28, 19, 29, 30, 12, 13);
75
+ $datas[]=array('2030', 28, 19, 29, 30, 12, 13,'');
44
-
76
+
45
- $json_php =json_encode($datas);
77
+ $json_php_datas =json_encode($datas);
78
+
79
+
80
+
81
+ $ret = new stdClass;
82
+
83
+ $ret->isStacked = true;
84
+
85
+ $ret->height = 300;
86
+
87
+ $ret->legend = new stdClass;
88
+
89
+ $ret->legend->positioin = 'top';
90
+
91
+ $ret->legend->maxLines = 3;
92
+
93
+ $ret->hAxis = new stdClass;
94
+
95
+ $ret->hAxis->minValue = 0;
96
+
97
+ $json_php_ret =json_encode($ret);
98
+
99
+ ?>
100
+
101
+ <html>
102
+
103
+ <head>
104
+
105
+ <!--Load the AJAX API-->
106
+
107
+ <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
108
+
109
+ <script type="text/javascript">
110
+
111
+ google.charts.load("current", {packages:["corechart"]});
112
+
113
+ google.charts.setOnLoadCallback(drawChart);
114
+
115
+ function drawChart() {
116
+
117
+
118
+
119
+ var dd = JSON.parse('<?php echo $json_php_datas; ?>');
120
+
121
+ var opt = JSON.parse('<?php echo $json_php_ret; ?>');
122
+
123
+ var data = google.visualization.arrayToDataTable(dd);
124
+
125
+ var view = new google.visualization.DataView(data);
126
+
127
+ var options_fullStacked = opt;
128
+
129
+ var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
130
+
131
+ chart.draw(view, options_fullStacked);
132
+
133
+
134
+
135
+ }
136
+
137
+ </script>
138
+
139
+ </head>
140
+
141
+ <body>
142
+
143
+ <!--Div that will hold the bar chart-->
144
+
145
+ <div id="barchart_values" style="width: 900px; height: 300px;"></div>
146
+
147
+ </body>
148
+
149
+ </html>
150
+
151
+
152
+
153
+ ```
154
+
155
+ こちらは引数の受け渡し
156
+
157
+ ```PHP
158
+
159
+ <?php
160
+
161
+ $ret = new stdClass;
162
+
163
+ $ret->cat = array('たま','ニャー');
164
+
165
+ $php_json = json_encode($ret);
46
166
 
47
167
  ?>
48
168
 
@@ -50,192 +170,38 @@
50
170
 
51
171
  <head>
52
172
 
53
- <!--Load the AJAX API-->
54
-
55
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
56
-
57
173
  </head>
58
174
 
59
175
  <body>
60
176
 
61
177
  <script type="text/javascript">
62
178
 
63
- google.charts.load("current", {packages:["corechart"]});
64
-
65
- google.charts.setOnLoadCallback(drawChart);
66
-
67
- function drawChart() {
179
+ function drawChart(php_json) {
68
-
180
+
181
+
182
+
69
- var dd = JSON.parse('<?php echo $json_php; ?>');
183
+ var rets = JSON.parse(php_json);
70
-
184
+
71
- var data = google.visualization.arrayToDataTable(dd);
185
+ var cats=rets.cat
72
-
73
- //https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns
186
+
74
-
75
- var view = new google.visualization.DataView(data);
187
+ for (var i = 0; i<cats.length;i++){
76
-
77
- view.setColumns([0,1,2,3,4,5,6]);
188
+
78
-
79
- var options_fullStacked = {
80
-
81
- isStacked: 'percent',
82
-
83
- height: 300,
189
+ alert(cats[i])
84
-
85
- legend: {position: 'top', maxLines: 3},
190
+
86
-
87
- hAxis: {
88
-
89
- minValue: 0,
90
-
91
- ticks: [0, .3, .6, .9, 1]
92
-
93
- }
191
+ }
94
-
95
- };
192
+
96
-
97
-
98
-
99
- var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
100
-
101
- chart.draw(view, options_fullStacked);
102
-
103
- }
193
+ }
194
+
195
+
104
196
 
105
197
  </script>
106
198
 
107
- <!--Div that will hold the pie chart-->
108
-
109
- <div id="barchart_values" style="width: 900px; height: 300px;"></div>
199
+ <script type="text/javascript">drawChart('<?php echo $php_json ?>')</script>
110
200
 
111
201
  </body>
112
202
 
113
-
114
-
115
203
  </html>
116
204
 
117
205
 
118
206
 
119
-
120
-
121
207
  ```
122
-
123
-
124
-
125
- 頂いた回答を参考にphpのオブジェクトをjavascriptのなかで次のようにセットしてみました。~~エラーにはなりませんが意図したグラフが描けないのは何が足りなくてそうなっているのか分かりません~~。原因分かりました
126
-
127
- →var options_fullStacked = {opt};誤り
128
-
129
-  var options_fullStacked =opt;正しい
130
-
131
-
132
-
133
- ```PHP
134
-
135
- <html>
136
-
137
- <head>
138
-
139
- <!--Load the AJAX API-->
140
-
141
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
142
-
143
- </head>
144
-
145
- <?php
146
-
147
- $datas = array();
148
-
149
- $datas[]=array('Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature');
150
-
151
- $datas[]=array('2010', 10, 24, 20, 32, 18, 5);
152
-
153
- $datas[]=array('2020', 16, 22, 23, 30, 16, 9);
154
-
155
- $datas[]=array('2030', 28, 19, 29, 30, 12, 13);
156
-
157
- $json_php_datas =json_encode($datas);
158
-
159
-
160
-
161
- $ret = new stdClass;
162
-
163
- $ret->isStacked = 'percent';
164
-
165
- $ret->height = 300;
166
-
167
- $ret->legent = new stdClass;
168
-
169
- $ret->legent->positioin = 'top';
170
-
171
- $ret->legent->maxLines = 3;
172
-
173
- $ret->hAxis = new stdClass;
174
-
175
- $ret->hAxis->minValue = 0;
176
-
177
- $ret->hAxis->ticks = array(0, 0.3, 0.6, 0.9, 1);
178
-
179
- $json_php_ret =json_encode($ret);
180
-
181
- ?>
182
-
183
- <body>
184
-
185
- <script type="text/javascript">
186
-
187
- google.charts.load("current", {packages:["corechart"]});
188
-
189
- google.charts.setOnLoadCallback(drawChart);
190
-
191
- function drawChart() {
192
-
193
-
194
-
195
- var dd = JSON.parse('<?php echo $json_php_datas; ?>');
196
-
197
- var opt = JSON.parse('<?php echo $json_php_ret; ?>');
198
-
199
- var data = google.visualization.arrayToDataTable(dd);
200
-
201
- //https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns
202
-
203
- var view = new google.visualization.DataView(data);
204
-
205
- var options_fullStacked = opt;
206
-
207
-
208
-
209
- var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
210
-
211
- chart.draw(view, options_fullStacked);
212
-
213
- }
214
-
215
- </script>
216
-
217
- <?php echo "<input type='button' value='グラフ表示' onclick=\"drawChart()\" />"; ?>
218
-
219
- <!--Div that will hold the pie chart-->
220
-
221
- <div id="barchart_values" style="width: 900px; height: 300px;"></div>
222
-
223
- </body>
224
-
225
-
226
-
227
- </html>
228
-
229
- ```
230
-
231
- また、コードの中で次のように引き渡して利用する方法
232
-
233
- ```PHP
234
-
235
- <?php echo "<input type='button' value='グラフ表示' onclick=\"drawChart($json_php_datas,$json_php_ret)\" />";
236
-
237
- function drawChart(php_dd,php_opt) ?>```
238
-
239
- ```PHP
240
-
241
- つもりjavascriptは引数にjson_encodeをかけたPHP変数を受け取れないのでしょうか?相変わらず引数渡しの方法もfunctionにはいるとundefineになってしまっています。

4

options_fullStarcedへのオブジェクトの指定方法を正しく変更しました

2018/11/06 03:48

投稿

s.kono
s.kono

スコア37

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  cf.https://developers.google.com/chart/interactive/docs/gallery/barchart
18
18
 
19
- roleについてはよく理解が出来ていないのですが{}で囲むような記述に対してどの用にセットしたら良いか分からないと言うのが質問の1つです。
19
+ roleについてはよく理解が出来ていないのですが{}で囲むような記述に対してどの用にセットしたら良いか分からないと言うのが質問の1つです。
20
20
 
21
21
 
22
22
 
@@ -122,7 +122,13 @@
122
122
 
123
123
 
124
124
 
125
- 頂いた回答を参考にphpのオブジェクトをjavascriptのなかで次のようにセットしてみました。エラーにはなりませんが意図したグラフが描けないのは何が足りなくてそうなっているのか分かりません。
125
+ 頂いた回答を参考にphpのオブジェクトをjavascriptのなかで次のようにセットしてみました。~~エラーにはなりませんが意図したグラフが描けないのは何が足りなくてそうなっているのか分かりません~~原因分かりました
126
+
127
+ →var options_fullStacked = {opt};誤り
128
+
129
+  var options_fullStacked =opt;正しい
130
+
131
+
126
132
 
127
133
  ```PHP
128
134
 
@@ -196,11 +202,7 @@
196
202
 
197
203
  var view = new google.visualization.DataView(data);
198
204
 
199
- var options_fullStacked = {
205
+ var options_fullStacked = opt;
200
-
201
- opt
202
-
203
- };
204
206
 
205
207
 
206
208
 

3

オプションをオブジェクトで渡すコードを追加しました

2018/11/05 05:20

投稿

s.kono
s.kono

スコア37

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ PHP 5.3.3
2
+
1
3
  PHPの配列データを使ってGoogleChartをHeadに仕込んだ関数としてbodyのボタンクリックで利用したいのですがどうすれば良いのでしょうか。bodyで呼び出すことは出来ました。
2
4
 
3
5
  また今回は省いても動いたので除外しましたが、配列の中にある{ role: 'annotation' } などはどのように組み込めばよいのかよいか分かりましたらあわせて教えていただけると助かります。よろしくお願いします。
@@ -117,3 +119,121 @@
117
119
 
118
120
 
119
121
  ```
122
+
123
+
124
+
125
+ 頂いた回答を参考にphpのオブジェクトをjavascriptのなかで次のようにセットしてみました。エラーにはなりませんが意図したグラフが描けないのは何が足りなくてそうなっているのか分かりません。
126
+
127
+ ```PHP
128
+
129
+ <html>
130
+
131
+ <head>
132
+
133
+ <!--Load the AJAX API-->
134
+
135
+ <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
136
+
137
+ </head>
138
+
139
+ <?php
140
+
141
+ $datas = array();
142
+
143
+ $datas[]=array('Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature');
144
+
145
+ $datas[]=array('2010', 10, 24, 20, 32, 18, 5);
146
+
147
+ $datas[]=array('2020', 16, 22, 23, 30, 16, 9);
148
+
149
+ $datas[]=array('2030', 28, 19, 29, 30, 12, 13);
150
+
151
+ $json_php_datas =json_encode($datas);
152
+
153
+
154
+
155
+ $ret = new stdClass;
156
+
157
+ $ret->isStacked = 'percent';
158
+
159
+ $ret->height = 300;
160
+
161
+ $ret->legent = new stdClass;
162
+
163
+ $ret->legent->positioin = 'top';
164
+
165
+ $ret->legent->maxLines = 3;
166
+
167
+ $ret->hAxis = new stdClass;
168
+
169
+ $ret->hAxis->minValue = 0;
170
+
171
+ $ret->hAxis->ticks = array(0, 0.3, 0.6, 0.9, 1);
172
+
173
+ $json_php_ret =json_encode($ret);
174
+
175
+ ?>
176
+
177
+ <body>
178
+
179
+ <script type="text/javascript">
180
+
181
+ google.charts.load("current", {packages:["corechart"]});
182
+
183
+ google.charts.setOnLoadCallback(drawChart);
184
+
185
+ function drawChart() {
186
+
187
+
188
+
189
+ var dd = JSON.parse('<?php echo $json_php_datas; ?>');
190
+
191
+ var opt = JSON.parse('<?php echo $json_php_ret; ?>');
192
+
193
+ var data = google.visualization.arrayToDataTable(dd);
194
+
195
+ //https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns
196
+
197
+ var view = new google.visualization.DataView(data);
198
+
199
+ var options_fullStacked = {
200
+
201
+ opt
202
+
203
+ };
204
+
205
+
206
+
207
+ var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
208
+
209
+ chart.draw(view, options_fullStacked);
210
+
211
+ }
212
+
213
+ </script>
214
+
215
+ <?php echo "<input type='button' value='グラフ表示' onclick=\"drawChart()\" />"; ?>
216
+
217
+ <!--Div that will hold the pie chart-->
218
+
219
+ <div id="barchart_values" style="width: 900px; height: 300px;"></div>
220
+
221
+ </body>
222
+
223
+
224
+
225
+ </html>
226
+
227
+ ```
228
+
229
+ また、コードの中で次のように引き渡して利用する方法
230
+
231
+ ```PHP
232
+
233
+ <?php echo "<input type='button' value='グラフ表示' onclick=\"drawChart($json_php_datas,$json_php_ret)\" />";
234
+
235
+ function drawChart(php_dd,php_opt) ?>```
236
+
237
+ ```PHP
238
+
239
+ つもりjavascriptは引数にjson_encodeをかけたPHP変数を受け取れないのでしょうか?相変わらず引数渡しの方法もfunctionにはいるとundefineになってしまっています。

2

質問に補足説明をついかしました。

2018/11/05 04:15

投稿

s.kono
s.kono

スコア37

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,20 @@
1
1
  PHPの配列データを使ってGoogleChartをHeadに仕込んだ関数としてbodyのボタンクリックで利用したいのですがどうすれば良いのでしょうか。bodyで呼び出すことは出来ました。
2
2
 
3
3
  また今回は省いても動いたので除外しましたが、配列の中にある{ role: 'annotation' } などはどのように組み込めばよいのかよいか分かりましたらあわせて教えていただけると助かります。よろしくお願いします。
4
+
5
+
6
+
7
+ 補足
8
+
9
+ MySQLのテーブルにアンケートの回答結果をレコードで持っています。
10
+
11
+ クロス集計させた結果を動的にグラフ化したいというのか最終形です。
12
+
13
+ グラフの種類としては100% stacked chartになります。
14
+
15
+ cf.https://developers.google.com/chart/interactive/docs/gallery/barchart
16
+
17
+ roleについてはよく理解が出来ていないのですが{}で囲むような記述に対してどの用にセットしたら良いか分からないと言うのが質問のひ1つです。
4
18
 
5
19
 
6
20
 

1

不要なコメントを削除して体裁を整えました

2018/11/02 01:48

投稿

s.kono
s.kono

スコア37

test CHANGED
File without changes
test CHANGED
@@ -50,19 +50,15 @@
50
50
 
51
51
  function drawChart() {
52
52
 
53
- var dd = JSON.parse('<?php echo $json_php; ?>');
53
+ var dd = JSON.parse('<?php echo $json_php; ?>');
54
-
55
-
56
-
57
- //var data = google.visualization.arrayToDataTable([dd[0],dd[1],dd[2],dd[3]]);
58
54
 
59
55
  var data = google.visualization.arrayToDataTable(dd);
60
56
 
61
57
  //https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns
62
58
 
63
- var view = new google.visualization.DataView(data);
59
+ var view = new google.visualization.DataView(data);
64
60
 
65
- view.setColumns([0,1,2,3,4,5,6]);
61
+ view.setColumns([0,1,2,3,4,5,6]);
66
62
 
67
63
  var options_fullStacked = {
68
64