現在の位置: ホーム> 最新記事一覧> PHPがオンラインチャートとデータの視覚化を実現するための実用的な方法

PHPがオンラインチャートとデータの視覚化を実現するための実用的な方法

M66 2025-07-09

PHPでのオンラインチャートとデータの視覚化を実現する方法

最新のWebアプリケーションでは、データのグラフィカルな表示がユーザーエクスペリエンスを改善するだけでなく、データコンテンツをより直感的に理解するのにも役立ちます。 PHPとフロントエンドチャートライブラリの組み合わせにより、効率的で動的なデータの視覚化を実現できます。この記事では、Chart.jsとGoogleチャートの2つの一般的な実装方法を共有します。

chart.jsを使用してチャートを表示します

Chart.jsは、バーチャート、ラインチャート、パイチャート、その他のタイプをサポートするオープンソースのJavaScriptチャートライブラリです。チャートの自動表示は、PHPでJavaScriptコードを動的に生成し、データを渡すことで実現できます。

<?php
// データを定義します
$data = array(
    "January" => 10、
    「2月」=> 20、
    「3月」=> 15、
    「4月」=> 25、
    「5月」=> 30、
    「6月」=> 20
）;

// javascriptコード$ jscode = "を生成するします
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: " . json_encode(array_keys($data)) . ",
            datasets: [{
                label: 'Number of Sales',
                data: " . json_encode(array_values($data)) . ",
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
";

//出力チャートエコー "<canvas id='myChart' width='400' height='400'></canvas> ";
echo $ jscode;
？>

このコードでは、PHPはデータの準備と、対応するJavaScriptスクリプトの生成、およびHTMLのCanvasタグを介したチャートレンダリングを完了する責任があります。

Googleチャートを使用して視覚チャートを生成します

Google Chartsは、Googleが提供する無料のチャートソリューションであり、パイチャート、マップ、バーチャートなど、さまざまな種類のチャートをサポートします。PHPで使用すると、データを動的に構築し、JavaScript構成に出力できます。 

<?php
// データを定義します
$data = array(
    array('Task', 'Hours per Day'),
    array('Work', 11),
    array('Eat', 2),
    array('Sleep', 7),
    array('Exercise', 4)
);

// 生成する HTML コード
$htmlCode = "
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(" . json_encode($data) . ");

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
<div id='donutchart' style='width: 900px; height: 500px;'></div>
";

//出力チャートecho $ htmlcode;
？>

Googleチャートを使用すると、インタラクティブなチャートは、さまざまなデータ分析とプレゼンテーションシナリオのために簡単に構築できます。

要約します

PHPはフロントエンドチャートライブラリと組み合わされて、データの視覚化機能を大幅に改善します。 chart.jsを介して実装されたバーチャートであろうと、Googleチャートによって作成されたパイチャートであろうと、開発者は柔軟なデータ組織とスクリプト出力を通じて直感的なデータ表現をWebサイトに追加できます。開発プロセス中に、最適な視覚効果とインタラクティブエクスペリエンスを実現するための特定のニーズに応じて、適切なチャートツールを選択できます。

関連内容