Q&A
DB接続とSELECT文のみ実行する最小限のコードにして試してみることを勧めます。
前提・実現したいこと
データベースの値を取得してChart.jsを使用して棒グラフ表示をしたいのですが
DBの値を取得して表示することが出来ません。
テーブルのataiカラムの値を取得して、x軸には同じレコードのdaytimeをセットしたいです。
よろしくお願いします。
発生している問題・エラーメッセージ
グラフの枠は表示しますが棒線は表示されません。 値を取得して表示が出来ないのか？それとも値自体を取得していないのか？ DBに接続しながらのデバッグ方法もわからないのでどちらが原因かもわかりません。 素人ながらdetasetsのセットの仕方がいけない気もしています。
該当のソースコード
PHP
1<?php 2function db_connect(){ 3 try{ 4 $pdo = new PDO('mysql:dbname=DB名;charset=utf8;host=localhost','root','password'); 5 } catch(PDOException $e) { 6 exit('DBConnectError:'.$e->getMessage()); 7 } 8 return $pdo; 9} 10?>
PHP
1<?php 2 3include('funcs.php'); 4 5$pdo = db_connect(); 6 7$atai = ''; 8$date = ''; 9 10$stmt = $pdo->prepare("SELECT* FROM テーブル名"); 11$status = $stmt->execute(); 12 13while($r = $stmt->fetch(PDO::FETCH_ASSOC)){ 14 15 $atai = $atai . '"'. $r['atai'].'".'; 16 $date = $date . '"'. $r['daytime'].'".'; 17} 18 19$atai = trim($atai,","); 20$date = trim($date,","); 21 22?> 23 24 25<!DOCTYPE html> 26<html lang="en"> 27<head> 28 <meta charset="UTF-8"> 29 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 30 <title>グラフテスト</title> 31</head> 32<body> 33 <canvas id="myChart"></canvas> 34 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> 35 <script> 36 var ctx = document.getElementById("myChart").getContext("2d"); 37 var device1Chart = new Chart(ctx, { 38 type: 'bar', 39 data: { 40 labels: [<?php $date ?>], 41 datasets: [{ 42 label: "ラベル", 43 data: [<?php $atai ?>], 44 backgroundColor: 45 'rgba(54, 162, 235, 0.2)', 46 borderColor: 47 'rgba(54, 162, 235, 1)', 48 borderWidth: 1 49 }] 50 }, 51 options: { 52 scales: { 53 yAxes: [{ 54 ticks: { 55 beginAtZero: true, 56 } 57 }] 58 } 59 } 60 }); 61 </script> 62</body> 63</html>
補足情報（FW/ツールのバージョンなど）
テーブル情報
| id_no | atai | daytime |
|---|---|---|
| 1 | 2450 | 2021/4/5 13:00 |
最小のコードにして値をhtmlで表示させてみたら取得出来ていました。
回答2件
0
mysqlをどういうふうに構築したかわからないのでなんとも言えませんが、
もしかしてmysql接続用のポートがデフォルト値と変わっていたり、
あるいはrootユーザーでは接続できない設定になっていたりしないでしょうか。
それと、DB接続の5行程度のコードだけ関数に外出しするよりは、
まずはスコープを分けずに動かしたほうがデバッグしやすいかと思いますよ。
$pdoをvar_dump()したりしながら、どこかでfalseになったりしていないかチェックするなど。
php
1while($r = $stmt->fetch(PDO::FETCH_ASSOC)){ 2 3 $atai = $atai . '"'. $r['atai'].'".'; 4 $date = $date . '"'. $r['daytime'].'".'; 5} 6 7$atai = trim($atai,","); 8$date = trim($date,",");
↓
php
1$ataiArray = []; 2$dateArray = [] 3while($r = $stmt->fetch(PDO::FETCH_ASSOC)){ 4 array_push($ataiArray, '"'. $r['atai'] . '"'; 5 array_push($dateArray, '"'. $r['daytime'] . '"'; 6} 7$atai = implode(',', $araiArray); 8$date = implode(',', $dateArray);
ってやっとくと、全項目にダブルクォートを囲いつつも、無駄なくカンマ区切りになってるかと。
投稿2021/04/14 04:54
編集2021/04/14 05:22退会済みユーザー
総合スコア0
0
ベストアンサー
出力されたHTMLのソースをとりあえず確認してみてください。
データが正常に取得できているとした場合、原因の1つとしてカンマがドットになっています。
PHP
1while($r = $stmt->fetch(PDO::FETCH_ASSOC)){ 2 3 $atai = $atai . '"'. $r['atai'].'".'; 4 $date = $date . '"'. $r['daytime'].'".'; 5}
投稿2021/04/14 05:16
総合スコア2449
labels: [<?php $date ?>],
data: [<?php $atai ?>],
<?php echo $hoge; ?>
のように出力も必要ですかね。
データは正常に取得できていました。
まだ課題が残っているようでしたら、質問に追記してください。
コードをシンプルにしてデータが取得できていることは確認出来ましたがグラフ表示は未だにされません。
tabuuさんのおっしゃる通りドットをカンマに変更し、更にataiのダブルクォーテーションを削除したらグラフ表示されました。
while($r = $stmt->fetch(PDO::FETCH_ASSOC)){
$atai = $atai . $r['atai'].',';
$date = $date . '"'. $r['daytime'].'",';
}
ありがとうございました。
あなたの回答
tips
プレビュー
