PHPでグラフを作成する方法には、主に次のような選択肢があります。
- PHPでデータを作成し、Chart.jsなどのJavaScriptライブラリで描画する方法
- PHPのGDライブラリを使って画像としてグラフを生成する方法
- QuickChartなどの外部サービスを使ってグラフ画像を生成する方法
- Google Chartsを使ってブラウザ上にグラフを表示する方法
Webサイトや管理画面でグラフを表示する場合は、PHPだけで描画するよりも、PHPでデータを用意し、ブラウザ側でChart.jsを使って描画する方法が一般的です。
一方で、メールやPDFにグラフを埋め込みたい場合は、画像として出力できるGDライブラリやQuickChartが向いています。
PHPでグラフを作る主な方法
PHP + Chart.jsでグラフを表示する方法
もっとも実用的で扱いやすい方法が、PHPとChart.jsを組み合わせる方法です。
PHP側で売上やアクセス数などのデータを用意し、それをJSON形式に変換してJavaScriptへ渡します。
Chart.jsは、受け取ったデータをもとに棒グラフ、折れ線グラフ、円グラフなどをブラウザ上に描画します。
この方法は、Webサイトや管理画面、ダッシュボードなどでよく使われます。
たとえば、月別売上をグラフ化する場合、PHPでは次のようにデータを用意します。
<?php
$labels = ['1月', '2月', '3月', '4月', '5月', '6月'];
$sales = [120000, 180000, 150000, 220000, 260000, 310000];
?>
HTML側では、Chart.jsを読み込み、PHPの配列をJSON形式でJavaScriptに渡します。
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<canvas id="salesChart"></canvas>
<script>
const labels = <?php echo json_encode($labels, JSON_UNESCAPED_UNICODE); ?>;
const salesData = <?php echo json_encode($sales); ?>;
new Chart(document.getElementById('salesChart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '売上',
data: salesData
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
このコードでは、type: 'bar' を指定しているため、棒グラフが表示されます。
Chart.jsでは、type の値を変更することで、さまざまな種類のグラフを作成できます。
type: 'bar' // 棒グラフ
type: 'line' // 折れ線グラフ
type: 'pie' // 円グラフ
type: 'doughnut' // ドーナツグラフ
PHP + Chart.jsが向いているケース
PHPとChart.jsの組み合わせは、次のようなケースに向いています。
- 管理画面で売上データを表示したい
- アクセス解析の推移をグラフ化したい
- 広告レポートをダッシュボード化したい
- 商品別・カテゴリ別の集計結果を見やすく表示したい
- ユーザーの操作に応じてグラフを更新したい
ブラウザ上で描画するため、ホバー時のツールチップ表示やレスポンシブ対応もしやすいのがメリットです。
データベースの値をグラフ化する方法
MySQLからデータを取得してグラフ化する
実務では、PHPの配列に直接データを書くのではなく、MySQLなどのデータベースから値を取得してグラフ化することが多いです。
たとえば、売上データを保存するテーブルがあるとします。
CREATE TABLE sales (
id INT AUTO_INCREMENT PRIMARY KEY,
sold_at DATE NOT NULL,
amount INT NOT NULL
);
月別売上を集計する場合は、次のようなSQLを使います。
SELECT
DATE_FORMAT(sold_at, '%Y-%m') AS month,
SUM(amount) AS total
FROM sales
GROUP BY DATE_FORMAT(sold_at, '%Y-%m')
ORDER BY month;
PHPでは、PDOを使ってデータを取得します。
<?php
$pdo = new PDO(
'mysql:host=localhost;dbname=test_db;charset=utf8mb4',
'db_user',
'db_password',
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]
);
$sql = "
SELECT
DATE_FORMAT(sold_at, '%Y-%m') AS month,
SUM(amount) AS total
FROM sales
GROUP BY DATE_FORMAT(sold_at, '%Y-%m')
ORDER BY month
";
$stmt = $pdo->query($sql);
$rows = $stmt->fetchAll();
$labels = [];
$values = [];
foreach ($rows as $row) {
$labels[] = $row['month'];
$values[] = (int)$row['total'];
}
?>
取得した $labels と $values をChart.jsへ渡せば、データベースの値を使ったグラフを表示できます。
<canvas id="salesChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script>
const labels = <?php echo json_encode($labels, JSON_UNESCAPED_UNICODE); ?>;
const values = <?php echo json_encode($values); ?>;
new Chart(document.getElementById('salesChart'), {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '月別売上',
data: values
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
データベース集計で注意するポイント
データベースから集計する場合は、パフォーマンスにも注意が必要です。
データ量が少ないうちは問題ありませんが、売上データやアクセスログが増えると、全期間のデータを毎回集計する処理は重くなります。
そのため、実務では期間を指定して集計するのが一般的です。
SELECT
DATE_FORMAT(sold_at, '%Y-%m') AS month,
SUM(amount) AS total
FROM sales
WHERE sold_at >= '2026-01-01'
AND sold_at < '2027-01-01'
GROUP BY DATE_FORMAT(sold_at, '%Y-%m')
ORDER BY month;
また、日付カラムにはインデックスを付けておくと、検索や集計の負荷を下げやすくなります。
CREATE INDEX idx_sales_sold_at ON sales(sold_at);
さらに、売上が0件の月はSQLの結果に出てこない点にも注意が必要です。
グラフ上で0として表示したい場合は、PHP側で月の一覧を作り、不足している月を0で補完する処理を入れます。
PHPでJSON APIを作ってグラフ化する方法
JSON API形式にすると管理しやすい
管理画面やダッシュボードを作る場合は、PHPページに直接データを埋め込むよりも、PHPでJSON APIを作る構成がおすすめです。
たとえば、data.php というファイルを作り、グラフ用のデータをJSON形式で返します。
<?php
header('Content-Type: application/json; charset=utf-8');
$data = [
'labels' => ['1月', '2月', '3月', '4月', '5月', '6月'],
'values' => [120000, 180000, 150000, 220000, 260000, 310000],
];
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_THROW_ON_ERROR);
フロント側では、fetch() を使ってJSONを取得し、Chart.jsで描画します。
<canvas id="salesChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script>
fetch('data.php')
.then(response => response.json())
.then(chartData => {
new Chart(document.getElementById('salesChart'), {
type: 'bar',
data: {
labels: chartData.labels,
datasets: [{
label: '売上',
data: chartData.values
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
})
.catch(error => {
console.error('データ取得エラー:', error);
});
</script>
この構成にしておくと、後から条件指定や非同期更新を追加しやすくなります。
JSON API形式が向いているケース
JSON API形式は、次のようなケースに向いています。
- 期間を切り替えてグラフを更新したい
- 商品別、店舗別、カテゴリ別に絞り込みたい
- 複数のグラフを同じ画面に表示したい
- Ajaxでデータを取得して画面を更新したい
- フロントエンドとバックエンドを分けて管理したい
小規模なページであればPHPに直接データを埋め込んでも問題ありませんが、拡張性を考えるならJSON API形式の方が扱いやすくなります。
PHPで折れ線グラフを作る方法
アクセス数や売上推移には折れ線グラフを使う
時系列データを表示する場合は、棒グラフよりも折れ線グラフが向いています。
たとえば、曜日別のアクセス数をグラフ化する場合は、次のように記述できます。
<?php
$labels = ['月', '火', '水', '木', '金', '土', '日'];
$access = [320, 410, 380, 520, 610, 750, 690];
?>
<canvas id="accessChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script>
const labels = <?php echo json_encode($labels, JSON_UNESCAPED_UNICODE); ?>;
const access = <?php echo json_encode($access); ?>;
new Chart(document.getElementById('accessChart'), {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'アクセス数',
data: access,
tension: 0.3
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
type: 'line' を指定することで、折れ線グラフを表示できます。
tension は線のなめらかさを調整する設定です。
数値を大きくすると曲線に近づき、0 にすると直線的なグラフになります。
PHPで円グラフを作る方法
構成比を見せるなら円グラフが便利
流入元の割合やカテゴリ別の構成比など、全体に対する割合を見せたい場合は円グラフが使えます。
<?php
$labels = ['自然検索', '広告', 'SNS', '直接流入', '紹介'];
$values = [45, 25, 15, 10, 5];
?>
<canvas id="trafficChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script>
const labels = <?php echo json_encode($labels, JSON_UNESCAPED_UNICODE); ?>;
const values = <?php echo json_encode($values); ?>;
new Chart(document.getElementById('trafficChart'), {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: '流入割合',
data: values
}]
},
options: {
responsive: true
}
});
</script>
円グラフは、全体に対する割合を直感的に見せられる点がメリットです。
ただし、項目数が多い場合は見づらくなるため、カテゴリが多いときは棒グラフや横棒グラフを使った方が比較しやすくなります。
PHPのGDライブラリでグラフ画像を作る方法
PHPだけでPNG画像のグラフを生成できる
JavaScriptを使わず、PHPだけでグラフを作りたい場合は、GDライブラリを使う方法があります。
GDライブラリを使うと、PHPで画像を生成し、棒グラフなどをPNG画像として出力できます。
<?php
$data = [
'Jan' => 120,
'Feb' => 180,
'Mar' => 150,
'Apr' => 220,
'May' => 260,
];
$width = 600;
$height = 400;
$margin = 50;
$image = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);
$blue = imagecolorallocate($image, 80, 140, 240);
imagefill($image, 0, 0, $white);
imageline($image, $margin, $margin, $margin, $height - $margin, $black);
imageline($image, $margin, $height - $margin, $width - $margin, $height - $margin, $black);
$maxValue = max($data);
$barCount = count($data);
$chartWidth = $width - $margin * 2;
$chartHeight = $height - $margin * 2;
$barWidth = $chartWidth / ($barCount * 2);
$i = 0;
foreach ($data as $label => $value) {
$x1 = $margin + ($i * 2 + 0.5) * $barWidth;
$x2 = $x1 + $barWidth;
$barHeight = ($value / $maxValue) * $chartHeight;
$y1 = ($height - $margin) - $barHeight;
$y2 = $height - $margin;
imagefilledrectangle($image, (int)$x1, (int)$y1, (int)$x2, (int)$y2, $blue);
imagestring($image, 3, (int)$x1, $height - $margin + 10, $label, $black);
imagestring($image, 3, (int)$x1, (int)$y1 - 15, (string)$value, $black);
$i++;
}
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
このファイルにアクセスすると、PNG形式の棒グラフが表示されます。
HTMLから画像として読み込む場合は、次のように記述します。
<img src="gd-chart.php" alt="売上グラフ">
GDライブラリを使うときの注意点
GDライブラリは、PHPだけで画像を生成できる点がメリットです。
ただし、Chart.jsのようなツールチップ表示やアニメーション、レスポンシブ対応はありません。
また、軸、目盛り、凡例、色、ラベルなどを自分で細かく実装する必要があります。
さらに、imagestring() は日本語表示に向いていません。
日本語ラベルを表示したい場合は、imagettftext() を使い、日本語対応フォントを指定する必要があります。
$fontPath = __DIR__ . '/NotoSansJP-Regular.ttf';
imagettftext(
$image,
12,
0,
80,
350,
$black,
$fontPath,
'売上'
);
そのため、GDライブラリは、簡易的な画像グラフを作りたい場合や、グラフを画像として保存したい場合に向いています。
QuickChartでグラフ画像を作る方法
メールやPDFにグラフを入れるならQuickChartが便利
QuickChartを使うと、Chart.jsの設定をもとにグラフ画像を生成できます。
通常のChart.jsはブラウザ上で動作するため、メール本文やPDFにそのまま埋め込むことはできません。
しかし、QuickChartを使えば、グラフを画像URLとして扱えるため、メールやPDFにも利用しやすくなります。
PHPでQuickChartのURLを生成する例は次の通りです。
<?php
$config = [
'type' => 'bar',
'data' => [
'labels' => ['1月', '2月', '3月', '4月'],
'datasets' => [[
'label' => '売上',
'data' => [120, 180, 150, 220],
]]
]
];
$url = 'https://quickchart.io/chart?c=' . urlencode(
json_encode($config, JSON_UNESCAPED_UNICODE)
);
?>
<img src="<?php echo htmlspecialchars($url, ENT_QUOTES, 'UTF-8'); ?>" alt="売上グラフ">
この方法では、PHPでChart.js用の設定を作成し、それをURLに含めてQuickChartへ渡します。
QuickChart側でグラフ画像が生成され、img タグで表示できます。
QuickChartを使うときの注意点
QuickChartは便利ですが、外部サービスに依存する点に注意が必要です。
社内データや機密情報を含むグラフを扱う場合は、外部サービスへデータを送信しても問題ないか確認する必要があります。
また、データ量が多い場合はURLが長くなりすぎることがあります。
その場合は、GETパラメータではなくPOST APIの利用を検討します。
QuickChartは、次のような用途に向いています。
- メールにグラフ画像を入れたい
- PDFレポートにグラフを表示したい
- Slackやチャットツールにグラフを投稿したい
- OGP画像やレポート画像を自動生成したい
Web画面でインタラクティブなグラフを表示したい場合は、QuickChartよりもChart.jsを直接使う方が適しています。
Google Chartsでグラフを作る方法
Google ChartsでもPHPのデータを使える
Google Chartsを使ってグラフを作成することもできます。
基本的な考え方はChart.jsと同じで、PHPでデータを用意し、JavaScript側に渡してグラフを描画します。
<?php
$data = [
['月', '売上'],
['1月', 120000],
['2月', 180000],
['3月', 150000],
['4月', 220000],
];
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 700px; height: 400px;"></div>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable(
<?php echo json_encode($data, JSON_UNESCAPED_UNICODE); ?>
);
const options = {
title: '月別売上',
legend: { position: 'bottom' }
};
const chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
</script>
Google Chartsは、さまざまな種類のグラフを簡単に表示できる点がメリットです。
ただし、Googleのローダーに依存するため、オフライン環境や外部通信を制限している環境では使いにくい場合があります。
PHPでグラフを作るときのセキュリティ対策
JavaScriptにデータを渡すときはjson_encodeを使う
PHPの値をJavaScriptに渡すときは、文字列を直接埋め込むのではなく、json_encode() を使うのが基本です。
避けたい書き方は次のような例です。
<script>
const label = '<?php echo $label; ?>';
</script>
このように直接出力すると、値の中にシングルクォートやスクリプトタグが含まれていた場合、JavaScriptが壊れたり、XSSの原因になったりする可能性があります。
PHPの配列や文字列をJavaScriptに渡す場合は、次のように書きます。
<script>
const labels = <?php echo json_encode(
$labels,
JSON_UNESCAPED_UNICODE
| JSON_HEX_TAG
| JSON_HEX_AMP
| JSON_HEX_APOS
| JSON_HEX_QUOT
); ?>;
</script>
このように json_encode() を使うことで、JavaScriptで安全に扱いやすい形式に変換できます。
HTMLに出力するときはhtmlspecialcharsを使う
グラフのタイトルや説明文などをHTMLに出力する場合は、htmlspecialchars() を使います。
echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8');
特に、ユーザーが入力した値やデータベースに保存された文字列を表示する場合は、HTMLエスケープを忘れないようにしましょう。
PHPでグラフを作る方法の選び方
Webサイトや管理画面ならChart.jsがおすすめ
Webページ上にグラフを表示したい場合は、PHPとChart.jsを組み合わせる方法がおすすめです。
PHPでデータを用意し、Chart.jsで描画する構成にすれば、見た目を調整しやすく、レスポンシブ対応やツールチップ表示も実装しやすくなります。
売上管理、アクセス解析、広告レポート、問い合わせ件数の可視化など、幅広い用途で使えます。
画像として出力したいならGDやQuickChartを使う
グラフを画像として保存したい場合や、メール・PDFに埋め込みたい場合は、GDライブラリやQuickChartが向いています。
GDライブラリはPHPだけで画像を生成できますが、デザイン調整には手間がかかります。
QuickChartは簡単にグラフ画像を作れる一方で、外部サービスに依存する点に注意が必要です。
拡張性を重視するならJSON API形式にする
管理画面やダッシュボードを本格的に作る場合は、PHPをJSON API化し、JavaScript側でグラフを描画する構成がおすすめです。
この方法なら、期間指定や絞り込み、非同期更新、複数グラフの表示などに対応しやすくなります。
PHPでグラフを作成する際のまとめ
PHPでグラフを作成する方法には、Chart.js、GDライブラリ、QuickChart、Google Chartsなどがあります。
もっとも使いやすいのは、PHPでデータを用意し、Chart.jsでグラフを描画する方法です。
Webサイトや管理画面であれば、この方法を選ぶとよいでしょう。
一方で、グラフを画像として扱いたい場合は、GDライブラリやQuickChartが便利です。
メールやPDFに埋め込む場合は、画像化できる方法を選ぶ必要があります。
また、実務でグラフを扱う場合は、見た目だけでなく、セキュリティやパフォーマンスにも注意が必要です。
PHPからJavaScriptへデータを渡すときは json_encode() を使い、HTMLに文字列を出力するときは htmlspecialchars() を使いましょう。
まずは、PHPとChart.jsを組み合わせた基本パターンを覚えるのがおすすめです。
そのうえで、画像出力やAPI化など、用途に応じて適切な方法を選ぶとよいでしょう。
以上、PHPでグラフを作成する方法についてでした。
最後までお読みいただき、ありがとうございました。
