前提・実現したいこと
データベースの値を取得して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 |
回答2件
あなたの回答
tips
プレビュー