現在の位置: ホーム> 最新記事一覧> PHPとchart.jsを使用してデータチャート表示機能を開発する方法

PHPとchart.jsを使用してデータチャート表示機能を開発する方法

M66 2025-07-15

PHPとchart.jsを使用してデータチャート表示機能を開発する方法

今日の情報年齢では、データの視覚化は、製品またはプロジェクトを測定するための重要な指標の1つになりました。開発者として、適切なツールとテクニックを備えたデータチャートを提示することが重要です。強力なサーバー側のスクリプト言語として、PHPはデータを簡単に処理および表示できます。この記事では、PHPとchart.jsを使用してデータチャート表示関数を開発し、関連するコードの例を提供する方法について詳しく説明します。

データチャートライブラリを選択します

現在、Googleチャート、chart.jsなど、市場で選択できるさまざまなオープンソースデータチャートライブラリがあります。これらは、さまざまな開発ニーズを満たすために、幅広いチャートタイプとカスタマイズオプションを提供しています。

この記事では、chart.jsを例として、PHPと組み合わせてデータチャートディスプレイ機能を開発する方法を示す例を把握します。 Chart.jsは、さまざまなチャートタイプをサポートし、主要な最新のブラウザと互換性のある軽量のJavaScriptチャートライブラリです。

chart.jsライブラリの紹介

まず、chart.jsライブラリをプロジェクトに紹介する必要があります。 CDNを介して導入するか、ローカルでダウンロードしてホストすることができます。

 
<!DOCTYPE html>
<html>
<head>
  <title>データチャート表示</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>
</body>
</html>

データベースからデータを取得します

次に、販売データを含むデータベーステーブルがあると仮定し、フィールドには販売や販売日などの情報が含まれていると仮定します。データベースからデータをPHPから取得し、プレゼンテーションのためにフロントエンドチャートに渡す必要があります。

 
<?php
// データベースに接続していると仮定します，データベース接続オブジェクトを取得します$conn
$sql = "SELECT * FROM sales";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $data[] = $row;
  }
}

// データを変換しますJSON形式
$jsonData = json_encode($data);
?>

データをチャートに渡します

次に、PHPで渡されたデータをJavaScriptを介してchart.jsに渡し、チャートとしてレンダリングする必要があります。次のコードは、販売データを処理および表示する方法を示しています。

 
<script>
  // 得るPHP合格したJSONデータ
  var data = <?php echo $jsonData; ?>;

  var labels = [];
  var values = [];

  // 遍历データ并提取销售日期和販売
  data.forEach(function(item) {
    labels.push(item.date);
    values.push(item.amount);
  });

  // 作成するChartオブジェクトとレンダリングチャート
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar', // チャートタイプ
    data: {
      labels: labels,
      datasets: [{
        label: '販売',
        data: values,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

その他のデータ処理と表示

基本的なチャート表示に加えて、実際のニーズに応じてデータをさらに処理できます。たとえば、フィルタリング、データのソート、またはチャートに補助情報を追加できます。

要約します

PHPとchart.jsを組み合わせることで、リッチで美しいデータチャート表示機能を簡単に開発できます。 barチャート、ラインチャート、またはパイチャートであろうと、chart.jsは優れた柔軟性を提供し、データを視覚化し、ユーザーエクスペリエンスを向上させるのに役立ちます。

この記事があなたに役立ち、PHPとchart.jsをすばやく開始してデータチャート関数を開発するのに役立つことを願っています。

関連内容