#目的：mysqlに登録した内容をchart.jsに表示させる
今回はphpでmysqlに洋服の名前と価格を登録し、その内容をchart.jsの公式ドキュメントのコードにはめ込む方法を解説します。
以下は完成の画面
データ登録画面(nyuuryoku.php)
グラフ表示画面(chart.php)
mysqlの準備
今回のテーブルは以下
##chart.jsの用意
公式サイトからコードを引っ張ってくる。
https://www.chartjs.org/docs/latest/
Get Startedに入る
このページのコードを丸コピ
そしてcdnを読み込む
すると
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myChart" 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('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'ほげ'],//各棒の名前（name)
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 20],//各縦棒の高さ(値段)
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
このコードを作れる。
出力するとこうなる
そしてここからphpにカスタマイズする
phpでは
登録用ページ（nyuryouku.php）
登録アクションページ(insert.php)
グラフ表示ページ(chart.php)
db接続関数記載ページ(funcs.php)
を用意。
nyuryoku.php
<?php
session_start();
include('funcs.php');//別の階層にfuncs.phpがある場合は「betukaisou/funcs.php」などパスを変えてincludesする
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>データ登録</title>
</head>
<body>
<!-- Head[Start] -->
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="chart.php">データ一覧</a></div>
</div>
</nav>
</header>
<!-- Head[End] -->
<p><a href="logout.php">ログアウト</a></p>
<!-- Main[Start] -->
<form method="post" action="insert.php">
<div class="jumbotron">
<fieldset>
<legend>服の登録</legend>
<label>服の名前：<input type="text" name="name"></label><br>
<label>価格<input type="text" name="price"></label><br>
<input type="submit" value="送信">
</fieldset>
</div>
</form>
<!-- Main[End] -->
</body>
</html>
insert.php
<?php
include('funcs.php');
//1. POSTデータ取得
//$name = filter_input( INPUT_GET, ","name" ); //こういうのもあるよ
//$price = filter_input( INPUT_POST, "price" ); //こういうのもあるよ
$name = $_POST['name'];
$price = $_POST['price'];
//2. DB接続します
$pdo = db_connect();
//３．データ登録SQL作成
//prepare("")の中にはmysqlのSQLで入力したINSERT文を入れて修正すれば良いイメージ
$stmt = $pdo->prepare("INSERT INTO chart_table(name,price,indate)VALUES(:name,:price,sysdate());
");
$stmt->bindValue(':name', h($name), PDO::PARAM_STR); //Integer（数値の場合 PDO::PARAM_INT) 第３引数は省略出来るが、セキュリティの観点から記述している。文字列か数値はmysqlのデータベースに登録したものがvarcharaかintかというところで判断する
$stmt->bindValue(':price', h($price), PDO::PARAM_INT); //Integer（数値の場合 PDO::PARAM_INT)
$status = $stmt->execute();
//４．データ登録処理後（基本コピペ使用でOK)
if($status==false){
//SQL実行時にエラーがある場合（エラーオブジェクト取得して表示）
$error = $stmt->errorInfo();
exit("SQLError:".$error[2]);//エラーが起きたらエラーの2番目の配列から取ります。ここは考えず、これを使えばOK
// SQLEErrorの部分はエラー時出てくる文なのでなんでもOK
}else{
//５．index.phpへリダイレクト(エラーがなければindex.phpt)
header('Location: nyuryoku.php');//Location:の後ろの半角スペースは必ず入れる。
exit();
}
?>
chart.php
<?php
include('funcs.php');
//2. DB接続します
$pdo = db_connect();
$name = '';
$price = '';
//2．データ登録SQL作成
//prepare("")の中にはmysqlのSQLで入力したINSERT文を入れて修正すれば良いイメージ
$stmt = $pdo->prepare("SELECT* FROM chart_table");
$status = $stmt->execute();
//loop through the returned data
while( $r = $stmt->fetch(PDO::FETCH_ASSOC)){
$name = $name . '"'. $r['name'].'",';
$price = $price . '"'. $r['price'] .'",';
}
$name = trim($name,",");
$price = trim($price,",");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myChart" 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('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<?php echo $name ?>],//各棒の名前（name)
// labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'ほげ'],//各棒の名前（name)
datasets: [{
label: '# of Votes',
data: [<?php echo $price ?>],//各縦棒の高さ(値段)
// data: [12, 19, 3, 5, 2, 20],//各縦棒の高さ(値段)
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
funcs.php
<?php
//共通に使う関数を記述
.DB接続の関数
function db_connect(){
try {
//localhostの時はこれ。さくらの場合さくらのデータベースをいれる
//Password:MAMP='root',XAMPP=''
$pdo = new PDO('mysql:dbname=chart1;charset=utf8;host=localhost','root','root');
} catch (PDOException $e) {//$eにエラー内容が入っている。
exit('DBConnectError:'.$e->getMessage());//ここのDBConnectErrorはエラー時の文字表示の為、ここはなんでも良い。この項目２は基本idとpass以外コピペで覚えればOK
}
return $pdo;//※重要！！※ ここでリターンすることで他の項目でも使用している変数($pdo)を関数の外でも使用できるようにしている
}
?>
#ポイントの解説
chart.phpの以下の部分
$name = '';
$price = '';
//2．データ登録SQL作成
//prepare("")の中にはmysqlのSQLで入力したINSERT文を入れて修正すれば良いイメージ
$stmt = $pdo->prepare("SELECT* FROM chart_table");
$status = $stmt->execute();
//loop through the returned data
while( $r = $stmt->fetch(PDO::FETCH_ASSOC)){
$name = $name . '"'. $r['name'].'",';
$price = $price . '"'. $r['price'] .'",';
}
$name = trim($name,",");
$price = trim($price,",");
変数に持たせた値を
labels: [<?php echo $name ?>],//各棒の名前（name)
// labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'ほげ'],//各棒の名前（name)
datasets: [{
label: '# of Votes',
data: [<?php echo $price ?>],//各縦棒の高さ(値段)
// data: [12, 19, 3, 5, 2, 20],//各縦棒の高さ(値段)
script内でechoで呼び出している。
こうすることで、mysqlに登録した服の名前と価格がグラフに反映される。
今回はchart.jsの公式ドキュメントを簡単に接続する例としました。
次回はjsonに挑戦したいです。