PHP と Chart.js を使用してマルチチャート データ視覚化アプリケーションを作成する

インターネットの継続的な発展に伴い、特に電子商取引、ソーシャル ネットワーク、金融、製造などの分野で、さまざまなネットワーク アプリケーションやシステムに大量のデータが生成され、保存されています。このデータからより多くの情報を抽出するために、データ視覚化が一般的な方法になっています。データをグラフ形式に変換することで、ユーザーはデータをより簡単に理解し、分析できるようになります。この記事では、PHP と Chart.js を使用して複数のグラフのデータ視覚化アプリケーションを作成する方法について説明します。

Chart.js とは何ですか?

Chart.js は、インタラクティブで動的、応答性の高いグラフの作成を可能にするオープンソースの JavaScript ライブラリです。縦棒グラフ、円グラフ、折れ線グラフなど、さまざまな種類のグラフがサポートされています。 Chart.js では、少量の構成といくつかの HTML タグのみを必要とし、簡潔で美しいグラフを自動的に生成します。さらに、Chart.js は HTML5 ベースの Canvas 要素を使用してグラフを表示するため、HTML5 をサポートするブラウザ上で実行できます。

PHP と Chart.js を使用した複数グラフのデータ視覚化アプリケーションの作成

このチュートリアルでは、PHP と Chart.js を使用して単純なデータ視覚化アプリケーションを作成する方法を紹介します。 MySQL をデータベースとして使用し、PHP と Chart.js をデータのクエリと視覚化に使用します。

ステップ 1: データベース テーブルを作成する

まず、「sales」という名前のデータベースを作成し、その中に「sales_data」という名前のテーブルを作成する必要があります。テーブルには次のフィールドが含まれている必要があります:

• id: 自己増分 ID
• month: 売上月
• revenue: 売上収益
• profit :profit

次の SQL ステートメントを使用してテーブルを作成します:

CREATE TABLE sales_data (
id INT NOT NULL AUTO_INCREMENT,
month DATE NOT NULL,
収益 DECIMAL (10, 2) NOT NULL,
利益 DECIMAL(10, 2) NOT NULL,
PRIMARY KEY (id)
);

PHP コードを使用して追加しますデータをこのテーブルに挿入します。シミュレーションされた販売データをいくつか挿入します。

ステップ 2: PHP スクリプトを作成する

次に、MySQL データベースに接続して販売データを読み取る PHP スクリプトを作成する必要があります。このスクリプトは、Chart.js でグラフを表示するために使用できる JSON 形式のデータを返します。

以下は PHP スクリプトのサンプル コードです。

ba5999b0ac6c6e033a161e94f54827f1connect_error) {

die("Connection failed: " . $conn->connect_error);

}

//MySQL をクエリしますDatabase
$query = "SELECT * FROM sales_data";
$result = $conn->query($query);

//クエリ結果を JSON 形式にフォーマットします
$ data = array();
while($row = $result->fetch_assoc()) {

$data[] = $row;

}

echo json_encode($data);

//MySQL 接続を閉じます
$conn->close();

?>

このスクリプトは JSON 形式の文字列を出力することに注意してください。この文字列には、クエリされたすべての販売データが含まれます。

ステップ 3: HTML ファイルと JavaScript ファイルを作成する

次に、Chart.js グラフを表示するための HTML ファイルと、Chart.js グラフを処理して描画するための JavaScript ファイルを作成する必要があります。 。

以下は HTML ファイルのサンプル コードです。

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7 Chart.js データ視覚化アプリケーション6e916e0f7d1e588d4f442bf645aedb2f
f69d1a0eed8813f6228307491e2690d550aa09ea3b2976bab298f7c95c9ff54e
32d8a8489ccf6ad22016e69b0555932f2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
436df2818770f95ecc351a71af35c845c2caaf3fc160dd2513ce82f021917f8b
31bf1d5b4e24f9a2df2a8454f6e05fa8c2caaf3fc160dd2513ce82f021917f8b
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Chart.js ライブラリの JavaScript ファイルを使用していることに注意してください。 HTML ファイルにはカスタム JavaScript ファイル (app.js) も含まれています。これは、データのクエリとグラフの描画に使用される JavaScript ファイルになります。

以下は JavaScript ファイルのサンプル コードです:

//Query MySQL データベース
functionloadSalesData(callback) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        callback(xhr.responseText);
    }
}
xhr.open('GET', 'sales.php');
xhr.send();

}

// 折れ線グラフを描画します
functiondrawLineChart(id, labels, data, label) {

var ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: label,
            data: data,
            borderColor: 'rgb(75, 192, 192)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: '销售收入'
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '月份'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '金额'
                }
            }]
        }
    }
});

}

//データをロードしてグラフを描画します
loadSalesData(function) (応答) {

//解析JSON格式的数据
var data = JSON.parse(response);

//获取月份和销售收入数据
var months = [];
var revenues = [];
for (var i = 0; i < data.length; i++) {
    months.push(data[i].month);
    revenues.push(data[i].revenue);
}

//绘制销售收入折线图
drawLineChart('revenue-chart', months, revenues, '销售收入');

//获取月份和利润数据
var profits = [];
for (var i = 0; i < data.length; i++) {
    profits.push(data[i].profit);
}

//绘制利润折线图
drawLineChart('profit-chart', months, profits, '利润');

});

loadSalesData とdrawLineChart という 2 つの関数を定義していることに注意してください。 PHP スクリプトから JSON 形式でデータをロードするには、loadSalesData 関数を使用します。一方、Canvas 要素に折れ線グラフを描画するには、drawLineChart 関数を使用します。

折れ線グラフを描画し、売上収益と利益のデータを使用する Chart.js ライブラリの例を使用しました。

ステップ 4: アプリケーションを実行する

これで、アプリケーションを実行する準備が整いました。 HTML ファイルと JavaScript ファイルを Web サーバーにアップロードし、ブラウザで HTML ファイルを開くだけです。 2 つのグラフが表示されます。1 つは売上収益グラフ、もう 1 つは利益グラフです。 ＃＃＃＃＃＃結論は＃＃＃

この記事では、PHP と Chart.js を使用して複数のグラフのデータ視覚化アプリケーションを作成する方法について説明しました。まずデータベース テーブルを作成し、次にデータをクエリするための PHP スクリプトを作成しました。次に、HTML ファイルの Chart.js ライブラリと JavaScript ファイルを使用して、グラフを処理して描画しました。最後に、アプリケーションを実行すると、2 つの美しい折れ線グラフが得られます。 PHP と Chart.js を使用したデータ視覚化アプリケーションの作成は非常に簡単で、このテクノロジを利用してあらゆる Web アプリケーションでデータを視覚化できます。

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