PHP と Chart.js を使用してデータ視覚化チャートを作成する

今日のデータ主導の世界では、データ分析とデータ視覚化は不可欠なツールとなっています。これに関連して、人気のあるネットワーク プログラミング言語としての PHP を使用して、高度にインタラクティブで動的な Web サイトやアプリケーションを構築できます。データをより適切に表示するには、対応するデータ視覚化ライブラリを使用する必要があります。この記事では、PHP と Chart.js ライブラリを使用してデータ視覚化チャートを作成する方法を説明します。

1. Chart.js の概要

Chart.js は、シンプルで応答性の高い、カスタマイズ可能なグラフを作成するための HTML5 Canvas に基づく JavaScript ライブラリです。棒グラフ、線形グラフ、円グラフなど、複数の種類のグラフから選択でき、API を通じて柔軟にカスタマイズできます。

2. Chart.js のインストールと使用

まず、最新バージョンの Chart.js をダウンロードし、プロジェクト ディレクトリの下の lib ディレクトリに抽出します。次に、グラフを使用する必要があるページに Chart.js スクリプト ファイルを導入する必要があります。

<script src="./lib/Chart.min.js"></script>

次に、グラフをレンダリングするための Canvas タグを作成する必要があります。

<canvas id="myChart" width="400" height="400"></canvas>

最後に、JavaScript で新しい Chart オブジェクトをインスタンス化し、対応するオプションを構成する必要があります。例:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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
                }
            }]
        }
    }
});

上記のコードは棒グラフを作成し、対応するデータを追加します。

3. データベースからデータを取得する

通常、グラフに表示するにはデータベースからデータを取得する必要があります。以下は、PHP を使用して MySQL データベースからデータを取得する例です。

まず、MySQL データベースに接続する必要があります。例:

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

次に、データベースにクエリを実行してデータを取得する必要があります。例:

$sql = "SELECT id, name, votes FROM candidates";
$result = $conn->query($sql);

$candidates = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $candidates[] = [
            'name' => $row['name'],
            'votes' => $row['votes']
        ];
    }
}

これにより、候補テーブルから必要なデータが取得され、配列 $candidates に保存されます。

最後に、対応するグラフを作成するためにデータを Chart.js に渡す必要があります。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: <?php echo json_encode(array_column($candidates, 'name')); ?>,
        datasets: [{
            label: '# of Votes',
            data: <?php echo json_encode(array_column($candidates, 'votes')); ?>,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

これにより、取得したデータに基づいて棒グラフが作成され、ページ上に表示されます。

4. 概要

この記事では、PHP と Chart.js ライブラリを使用してデータ視覚化チャートを作成する方法を紹介しました。 Chart.js ライブラリを使用して MySQL データベースからデータを取得し、そのデータを PHP 経由で Chart.js に渡す方法を学びました。これにより、データの視覚化プロセスがシンプルになり、データに基づいた意思決定のための貴重な情報が提供されます。

以上がPHP と Chart.js を使用してデータ視覚化チャートを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。