質問編集履歴
5
質問の内1つは回答を得られましたので現時点での最終コードを載せました。
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
|
-
```
|
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
|
183
|
+
var rets = JSON.parse(php_json);
|
70
|
-
|
184
|
+
|
71
|
-
var
|
185
|
+
var cats=rets.cat
|
72
|
-
|
73
|
-
|
186
|
+
|
74
|
-
|
75
|
-
var
|
187
|
+
for (var i = 0; i<cats.length;i++){
|
76
|
-
|
77
|
-
|
188
|
+
|
78
|
-
|
79
|
-
var options_fullStacked = {
|
80
|
-
|
81
|
-
isStacked: 'percent',
|
82
|
-
|
83
|
-
|
189
|
+
alert(cats[i])
|
84
|
-
|
85
|
-
|
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
|
-
|
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へのオブジェクトの指定方法を正しく変更しました
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についてはよく理解が出来ていないのですが{}で囲むような記述に対してどの用にセットしたら良いか分からないと言うのが質問の
|
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
オプションをオブジェクトで渡すコードを追加しました
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
質問に補足説明をついかしました。
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
不要なコメントを削除して体裁を整えました
test
CHANGED
File without changes
|
test
CHANGED
@@ -50,19 +50,15 @@
|
|
50
50
|
|
51
51
|
function drawChart() {
|
52
52
|
|
53
|
-
|
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
|
|