現在の位置: ホーム> 最新記事一覧> PHPデータチャート表示開発チュートリアル| PHPとchart.jsでチャートを作成します

PHPデータチャート表示開発チュートリアル| PHPとchart.jsでチャートを作成します

M66 2025-07-15

PHPデータチャート表示開発チュートリアル| PHPとchart.jsでチャートを作成します

情報の時代では、データの視覚化は、製品またはプロジェクトの重要な評価基準の1つになりました。開発者にとっては、データチャートを表示するための適切なツールとテクノロジーを選択することが特に重要です。人気のあるサーバー側のスクリプト言語として、PHPはデータを簡単に処理して表示できます。この記事では、PHPとchart.jsを使用してデータチャート表示機能を開発する方法を紹介します。

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

Google Charts、Chart.jsなど、選択できる優れたオープンソースデータチャートライブラリがたくさんあります。これらは、さまざまなニーズを満たすための豊富なチャートタイプと柔軟な構成オプションを提供します。この記事では、chart.jsを介したPHPデータチャート表示の実装を示します。

chart.jsライブラリの紹介

まず、chart.jsライブラリファイルをプロジェクトに紹介する必要があります。 CDNを介してchart.jsを導入するか、ローカルにダウンロードすることを選択できます。 CDNを介してchart.jsを導入するためのHTMLコードは次のとおりです。

 <!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コードの例です。

 <?php
// データベース接続が確立されていると仮定します
$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);
?>

JavaScriptを使用してチャートを描画します

データを取得した後、JavaScriptを使用してデータをchart.jsに渡し、チャートをレンダリングします。これがJavaScriptコードの例です。

 <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を介してバーチャートとしてレンダリングします。実際の開発では、必要に応じてさまざまなビジネスニーズを満たすために、他の情報をフィルタリング、ソート、または追加することもできます。

要するに、PHPとchart.jsを組み合わせて、効率的で絶妙なデータチャート表示関数を簡単に開発できます。これにより、ユーザーエクスペリエンスが向上するだけでなく、データの背後にある情報も明確に表示されます。この記事が開発プロセス中に役立つことを願っています。

関連内容