編集履歴

質問編集履歴

うううううううううう

2021/10/02 09:51

投稿

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~【Chart.js】AjaxでPHPからJSONの返り値が取得できない~~
1	+ ああああああああああ

test CHANGED Viewed

@@ -1,345 +1,5 @@
-### 前提・実現したいこと
+ああああああああああ
-Chart.jsを使い、指定した1ヶ月間のある時間を棒グラフで表したい。
+ああああああああああ
-データはMySQLに格納されており、PHPで取得、画面からはJavaScript(Ajax)でデータのやり取りている。
-返り値はJSON。
-### 発生している問題・エラーメッセージ
-submitしてもグラフが表示されない。
-### 該当のソースコード
-```PHP
-<?php
-    //エラーメッセージ初期化
-    $errorMessage = "";
-    $s_year = filter_input(INPUT_GET, 's_year');
-    $s_month = filter_input(INPUT_GET, 's_month');
-    if (empty($s_year)) {
-        $s_year = date('Y');
-        $s_month = date('n') - 1;
-    }
-    // セッション開始
-    session_start();
-    $db['host'] = "localhost";  // DBサーバのURL
-    $db['user'] = "amamiya";  // ユーザー名
-    $db['pass'] = "nishizono";  // ユーザー名のパスワード
-    $db['dbname'] = "eyebank";  // データベース名
-    $dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']);
-    //SQL実行
-    try {
-        $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION));
-        //データ取得
-        $sql = 'select * from s_time where s_year = ' . $s_year . ' and s_month = ' . $s_month . ' order by s_year, s_month, s_date';
-        $stmt = $pdo->prepare($sql);
-        $stmt->execute();
-    } catch (PDOException $e) {
-        $errorMessage = $errorMessage.'データベースエラー';
-        $errorMessage = $errorMessage.$sql;
-        echo $e->getMessage();
-    }
-    $s_date = '';
-    $s_time = '';
-    $temp_s_time = '';
-    $backgroundcolor = '';
-    $bordercolor = '';
-    //loop through the returned data
-    while( $r = $stmt->fetch(PDO::FETCH_ASSOC)){
-        $s_date = $s_date . '"'. $r['s_date'].'",';
-        $s_time = $s_time . '"'. $r['s_time'] .'",';
-        $temp_s_time = $r['s_time'];
-        if ($temp_s_time >= 11.5) {
-            $backgroundcolor = $backgroundcolor . "'rgba(255, 159, 64, 0.2)'" . ', ';
-            $bordercolor = $bordercolor . "'rgba(255, 159, 64, 1)'" . ', ';
-        }else{
-            $backgroundcolor = $backgroundcolor . "'rgba(54, 162, 235, 0.2)'" . ', ';
-            $bordercolor = $bordercolor . "'rgba(54, 162, 235, 1)'" . ', ';
-        }
-    }
-    $s_date = trim($s_date,",");
-    $s_time = trim($s_time,",");
-    $backgroundcolor = trim($backgroundcolor,",");
-    $bordercolor = trim($bordercolor,",");
-    $array = [$s_date, $s_time, $backgroundcolor, $bordercolor];
-    $json = json_encode( $array );
-    echo $json;
-?>
-```
-```HTML
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="robots" content="noindex" />
-    <title>s-system</title>
-    <link rel="stylesheet" type="text/css" href="css/s_system.css">
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-</head>
-<body>
-    <div class="stripe-pattern">
-        <h1>s-system</h1>
-    </div>
-    <br><br>
-<script>
-        function OnButtonClick(){
-            $s_year = document.getElementById("s_year").value;
-            $s_month = document.getElementById("s_month").value;
-            $.ajax({
-                type: "POST",
-                url: "s_time.php",
-                data: {"s_year": $s_year, "s_month": $s_month},
-                dataType : "json",
-                success: function(result){
-                }.done(function(data){
-                    var json = JSON.parse(data);
-                    alert(json[0]);
-                })
-            })
-        }
-    </script>
-    <script>
-        var year = today.getFullYear();
-        var s_year = document.getElementById("s_year");
-        s_year.value = year;
-    </script>
-    <input type="text" id="s_year" value="">年<input type="text" id="s_month" value="">月
-    <input type="button" value="抽出" onclick="OnButtonClick();">
-    <canvas id="sTime" width="400" height="400"></canvas>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
-    <script>
-    var ctx = document.getElementById('sTime').getContext('2d');
-    var myChart = new Chart(ctx, {
-        type: 'bar',
-        data: {
-            labels: [json[0]],
-            datasets: [{
-                label: 'S時間',
-                data: [json[1]],
-                backgroundColor: [json[3]],
-                borderColor: [json[4]],
-                borderWidth: 1
-            },
-           ]
-        },
-        options: {
+ああああああああああ
-            scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }
-                }]
-            }
-        }
-    });
-    </script>
-</body>
-</html>
-```
-### 試したこと
-PHPをHTMLと同じファイル内に書き、フォームオープン時に実行されることは確認しました。
-また、Ajaxでsuccessを通るのは確認できました。

2021/10/02 09:51

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -256,7 +256,7 @@
         var year = today.getFullYear();
-        var sleep_year = document.getElementById("s_year");
+        var s_year = document.getElementById("s_year");
         s_year.value = year;
@@ -270,13 +270,13 @@
-    <canvas id="sleepTime" width="400" height="400"></canvas>
+    <canvas id="sTime" width="400" height="400"></canvas>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
     <script>
-    var ctx = document.getElementById('sleepTime').getContext('2d');
+    var ctx = document.getElementById('sTime').getContext('2d');
     var myChart = new Chart(ctx, {

2021/09/29 04:42

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -156,6 +156,8 @@
 ?>
+```
 ```HTML
@@ -332,6 +334,8 @@
 </html>
+```
 ### 試したこと

2021/09/29 04:40

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,10 +20,6 @@
 ```PHP
-PHP
 <?php
@@ -118,7 +114,7 @@
         $s_date = $s_date . '"'. $r['s_date'].'",';
-        $s_time = $sleep_time . '"'. $r['s_time'] .'",';
+        $s_time = $s_time . '"'. $r['s_time'] .'",';
         $temp_s_time = $r['s_time'];
@@ -162,11 +158,7 @@
-```HTML(JavaScript)
-HTML
+```HTML
 <!DOCTYPE html>