質問編集履歴

6

うううううううううう

2021/10/02 09:52

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 【Chart.jp】PHPから受け取ったデータをJavaScriptにて加工してグラフに表示したい
1
+ ああああああああああ
test CHANGED
@@ -1,455 +1,5 @@
1
- ### 前提・実現したこと
1
+ いいいいいいいいい
2
2
 
3
- Chart.jsを使、指定した1ヶ月間のある時間を棒グラフで表した
3
+ いいいいいいいいいい
4
4
 
5
- データはMySQLに格納されており、PHPで取得、画面からはJavaScript(Ajax)でデータのやり取りてる。
6
-
7
- 返り値はTEXT。
8
-
9
- 複数の配列を"^"を間に挟み結合し、echoしている。
10
-
11
- JavaScriptでそれらを分割している。
12
-
13
-
14
-
15
- ### 発生している問題・エラーメッセージ
16
-
17
- 期待していたグラフが表示されない。
18
-
19
- ダブルクォーテーションにも判定が存在してしまう。
20
-
21
-
22
-
23
- ### 該当のソースコード
24
-
25
-
26
-
27
- ```PHP
28
-
29
- <?php
30
-
31
-
32
-
33
- //エラーメッセージ初期化
34
-
35
- $errorMessage = "";
36
-
37
-
38
-
39
- $s_year = filter_input(INPUT_GET, 's_year');
40
-
41
- $s_month = filter_input(INPUT_GET, 's_month');
42
-
43
-
44
-
45
- if (empty($s_year)) {
46
-
47
- $s_year = date('Y');
48
-
49
- $s_month = date('n') - 1;
50
-
51
- }
52
-
53
-
54
-
55
- // セッション開始
56
-
57
- session_start();
58
-
59
-
60
-
61
- $db['host'] = "amamiya"; // DBサーバのURL
62
-
63
- $db['user'] = "nishizono"; // ユーザー名
64
-
65
- $db['pass'] = "lucy"; // ユーザー名のパスワード
66
-
67
- $db['dbname'] = "monostone"; // データベース名
68
-
69
-
70
-
71
- $dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']);
72
-
73
-
74
-
75
- //SQL実行
76
-
77
- try {
78
-
79
- $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION));
80
-
81
-
82
-
83
- //データ取得
84
-
85
- $sql = 'select * from s_time where s_year = ' . $s_year . ' and s_month = ' . $s_month . ' order by s_year, s_month, s_date';
86
-
87
- $stmt = $pdo->prepare($sql);
88
-
89
- $stmt->execute();
90
-
91
-
92
-
93
- } catch (PDOException $e) {
94
-
95
- $errorMessage = $errorMessage.'データベースエラー';
96
-
97
- $errorMessage = $errorMessage.$sql;
98
-
99
- echo $e->getMessage();
100
-
101
- }
102
-
103
-
104
-
105
- $s_date = '';
106
-
107
- $s_time = '';
108
-
109
- $temp_s_time = '';
110
-
111
- $average_s_time = '';
112
-
113
- $backgroundcolor = '';
114
-
115
- $bordercolor = '';
116
-
117
-
118
-
119
- //loop through the returned data
120
-
121
- while( $r = $stmt->fetch(PDO::FETCH_ASSOC)){
122
-
123
- $s_date = $s_date . '"' . $r['s_date'] . '",';
124
-
125
- $s_time = $s_time . '"' . $r['s_time'] . '",';
126
-
127
- $temp_s_time = $r['s_time'];
128
-
129
- $average_s_time = $average_s_time . "11" . ', ';
130
-
131
- if ($temp_s_time >= 11.5) {
132
-
133
- $backgroundcolor = $backgroundcolor . "'rgba(255, 159, 64, 0.2)'" . ', ';
134
-
135
- $bordercolor = $bordercolor . "'rgba(255, 159, 64, 1)'" . ', ';
136
-
137
- }else{
138
-
139
- $backgroundcolor = $backgroundcolor . "'rgba(54, 162, 235, 0.2)'" . ', ';
140
-
141
- $bordercolor = $bordercolor . "'rgba(54, 162, 235, 1)'" . ', ';
142
-
143
- }
144
-
145
- }
146
-
147
-
148
-
149
- $s_date = trim($s_date,",");
150
-
151
- $s_time = trim($s_time,",");
152
-
153
- $average_s_time = trim($average_s_time,",");
154
-
155
- $backgroundcolor = trim($backgroundcolor,",");
156
-
157
- $bordercolor = trim($bordercolor,",");
158
-
159
-
160
-
161
- $result = $s_date . "^" . $s_time . "^" . $average_s_time . "^" . $backgroundcolor . "^" . $bordercolor;
162
-
163
- echo $result;
164
-
165
- //$array = [$s_date, $s_time, $average_s_time, $backgroundcolor, $bordercolor];
166
-
167
- //$json = json_encode( $array );
168
-
169
- //echo $json;
170
-
171
-
172
-
173
- ?>
174
-
175
-
176
-
177
- ```
178
-
179
-
180
-
181
- ```HTML
182
-
183
- <!DOCTYPE html>
184
-
185
- <html lang="ja">
186
-
187
-
188
-
189
- <head>
190
-
191
-
192
-
193
- <meta charset="UTF-8">
194
-
195
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
196
-
197
- <meta name="robots" content="noindex" />
198
-
199
-
200
-
201
- <title>test</title>
202
-
203
-
204
-
205
- <link rel="stylesheet" type="text/css" href="css/test.css">
206
-
207
-
208
-
209
- <script src="https://kit.fontawesome.com/ef28967822.js" crossorigin="anonymous"></script>
210
-
211
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
212
-
213
-
214
-
215
- </head>
216
-
217
-
218
-
219
- <body>
220
-
221
-
222
-
223
- <div class="stripe-pattern">
224
-
225
- <h1>test</h1>
226
-
227
- </div>
228
-
229
-
230
-
231
- <br><br>
232
-
233
-
234
-
235
- <script>
236
-
237
- function OnButtonClick(){
238
-
239
- $s_year = document.getElementById("s_year").value;
240
-
241
- $s_month = document.getElementById("s_month").value;
242
-
243
-
244
-
245
- $.ajax({
246
-
247
- type: "POST",
248
-
249
- url: "s_time.php",
250
-
251
- data: {"s_year": $s_year, "s_month": $s_month},
252
-
253
- dataType : "text"
254
-
255
- }).done(function(data){
256
-
257
- var s_date = data.substring(0, data.indexOf("^"));
258
-
259
- var s_time = data.substring(data.indexOf("^") + 1, data.indexOf("^", data.indexOf("^") + 1));
260
-
261
- var average_s_time = data.substring(data.indexOf("^", data.indexOf("^") + 1) + 1, data.indexOf("^", data.indexOf("^", data.indexOf("^") + 1) + 1));
262
-
263
- var backgroundcolor = data.substring(data.indexOf("^", data.indexOf("^", data.indexOf("^") + 1) + 1) + 1, data.indexOf("^", data.indexOf("^", data.indexOf("^", data.indexOf("^") + 1) + 1) + 1));
264
-
265
- var bordercolor = data.substring(data.indexOf("^", data.indexOf("^", data.indexOf("^", data.indexOf("^") + 1) + 1) + 1) + 1, data.length);
266
-
267
-
268
-
269
- //var json = JSON.parse(result);
270
-
271
- set(s_date, s_time, average_s_time, backgroundcolor, bordercolor);
272
-
273
- });
274
-
275
- }
276
-
277
- </script>
278
-
279
-
280
-
281
- <script>
282
-
283
- var today = new Date();
284
-
285
- var year = today.getFullYear();
286
-
287
- var month = today.getMonth() + 1;
288
-
289
- var s_year = document.getElementById("s_year");
290
-
291
- s_year.value = year;
292
-
293
- var s_month = document.getElementById("s_month");
294
-
295
- s_month.value = month;
296
-
297
- </script>
298
-
299
-
300
-
301
- <input type="text" id="s_year" value="2021">年<input type="text" id="s_month" value="8">月
302
-
303
- <input type="button" value="SELECT" onclick="OnButtonClick();">
304
-
305
-
306
-
307
- <canvas id="sTime" width="400" height="175"></canvas>
308
-
309
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
310
-
311
- <script>
312
-
313
- function set(s_date, s_time, average_s_time, backgroundcolor, bordercolor){
314
-
315
- console.log(s_date);
316
-
317
- var ctx = document.getElementById('sTime').getContext('2d');
318
-
319
- var myChart = new Chart(ctx, {
320
-
321
- type: 'bar',
322
-
323
- data: {
324
-
325
- labels: s_date,
326
-
327
- datasets: [{
328
-
329
- label: '睡眠時間',
330
-
331
- data: s_time,
332
-
333
- backgroundColor: backgroundcolor,
334
-
335
- borderColor: bordercolor,
336
-
337
- borderWidth: 1
338
-
339
- },
340
-
341
- {
342
-
343
- type: "line",
344
-
345
- label: "平均睡眠時間",
346
-
347
- data: average_s_time,
348
-
349
- borderColor: ['rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)','rgba(255, 100, 100, 1)'],
350
-
351
- lineTension: 0,
352
-
353
- fill: false,
354
-
355
- borderWidth: 2
356
-
357
- }
358
-
359
- ]
360
-
361
- },
362
-
363
- options: {
364
-
365
- scales: {
366
-
367
- yAxes: [{
368
-
369
- ticks: {
370
-
371
- beginAtZero: true
372
-
373
- }
374
-
375
- }]
376
-
377
- }
378
-
379
- }
380
-
381
- });
382
-
383
- }
384
-
385
- </script>
386
-
387
-
388
-
389
- </body>
390
-
391
-
392
-
393
- </html>
394
-
395
-
396
-
397
- ```
398
-
399
-
400
-
401
- ### 試したこと
402
-
403
- 変数(s_date, s_timeなど)をコンソールに表示し、結果テキストを直で貼り付けたところ、期待した結果になりました。
404
-
405
- PHPからの返り値をJSONにしなかったのは、JavaScript側でparseエラー(SyntaxError: JSON Parse error: Unable to parse JSON string)が出たからです。(原因が分からなかったため、文字列に切り替えました。)
406
-
407
- average_s_timeのborderColorは編集予定です。
408
-
409
-
410
-
411
- ### コンソールに表示される変数(s_date)
412
-
413
- "1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"
414
-
415
-
416
-
417
- ### 参考画像
418
-
419
- 期待値
420
-
421
- ![![期待値](5f34b01f953236cbbd85bd71ea203aa8.png)](16ce60dd9d641e4e1ec4d701ad368a6b.png)
422
-
423
-
424
-
425
- 実際の表示
426
-
427
- ![実際の表示](7402e8e134113b9a525dd572fc5e58f4.png)
428
-
429
-
430
-
431
- ### 追記
432
-
433
- JSONを下記のようにしても同じエラーが出ました。(SyntaxError: JSON Parse error: Unable to parse JSON string)
434
-
435
-
436
-
437
- ```PHP
438
-
439
- $array01 = explode(",", $s_date);
440
-
441
- $array02 = explode(",", $s_time);
442
-
443
- $array03 = explode(",", $average_s_time);
444
-
445
- $array04 = explode(",", $backgroundcolor);
446
-
447
- $array05 = explode(",", $bordercolor);
448
-
449
- $array00 = array($array01, $array02, $array03, $array04, $array05);
450
-
451
- $json = json_encode($array00);
452
-
453
- echo $json;
454
-
455
- ```
5
+ いいいいいいいいい

5

内容をマスク。

2021/10/02 09:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -436,11 +436,11 @@
436
436
 
437
437
  ```PHP
438
438
 
439
- $array01 = explode(",", $sleep_date);
439
+ $array01 = explode(",", $s_date);
440
-
440
+
441
- $array02 = explode(",", $sleep_time);
441
+ $array02 = explode(",", $s_time);
442
-
442
+
443
- $array03 = explode(",", $average_sleep_time);
443
+ $array03 = explode(",", $average_s_time);
444
444
 
445
445
  $array04 = explode(",", $backgroundcolor);
446
446
 

4

ソースの修正。

2021/09/30 10:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -434,7 +434,7 @@
434
434
 
435
435
 
436
436
 
437
- '''PHP
437
+ ```PHP
438
438
 
439
439
  $array01 = explode(",", $sleep_date);
440
440
 
@@ -452,4 +452,4 @@
452
452
 
453
453
  echo $json;
454
454
 
455
- '''
455
+ ```

3

エラー内容を追記。

2021/09/30 10:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -402,7 +402,7 @@
402
402
 
403
403
  変数(s_date, s_timeなど)をコンソールに表示し、結果テキストを直で貼り付けたところ、期待した結果になりました。
404
404
 
405
- PHPからの返り値をJSONにしなかったのは、JavaScript側でparseエラーが出たからです。(原因が分からなかったため、文字列に切り替えました。)
405
+ PHPからの返り値をJSONにしなかったのは、JavaScript側でparseエラー(SyntaxError: JSON Parse error: Unable to parse JSON string)が出たからです。(原因が分からなかったため、文字列に切り替えました。)
406
406
 
407
407
  average_s_timeのborderColorは編集予定です。
408
408
 
@@ -425,3 +425,31 @@
425
425
  実際の表示
426
426
 
427
427
  ![実際の表示](7402e8e134113b9a525dd572fc5e58f4.png)
428
+
429
+
430
+
431
+ ### 追記
432
+
433
+ JSONを下記のようにしても同じエラーが出ました。(SyntaxError: JSON Parse error: Unable to parse JSON string)
434
+
435
+
436
+
437
+ '''PHP
438
+
439
+ $array01 = explode(",", $sleep_date);
440
+
441
+ $array02 = explode(",", $sleep_time);
442
+
443
+ $array03 = explode(",", $average_sleep_time);
444
+
445
+ $array04 = explode(",", $backgroundcolor);
446
+
447
+ $array05 = explode(",", $bordercolor);
448
+
449
+ $array00 = array($array01, $array02, $array03, $array04, $array05);
450
+
451
+ $json = json_encode($array00);
452
+
453
+ echo $json;
454
+
455
+ '''

2

備考の追加。

2021/09/30 10:17

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -404,6 +404,8 @@
404
404
 
405
405
  PHPからの返り値をJSONにしなかったのは、JavaScript側でparseエラーが出たからです。(原因が分からなかったため、文字列に切り替えました。)
406
406
 
407
+ average_s_timeのborderColorは編集予定です。
408
+
407
409
 
408
410
 
409
411
  ### コンソールに表示される変数(s_date)

1

初心者マークを付加。試したことを付加。

2021/09/29 22:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -402,6 +402,8 @@
402
402
 
403
403
  変数(s_date, s_timeなど)をコンソールに表示し、結果テキストを直で貼り付けたところ、期待した結果になりました。
404
404
 
405
+ PHPからの返り値をJSONにしなかったのは、JavaScript側でparseエラーが出たからです。(原因が分からなかったため、文字列に切り替えました。)
406
+
405
407
 
406
408
 
407
409
  ### コンソールに表示される変数(s_date)