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

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

WBOY

リリース： 2023-05-11 11:36:02

オリジナル

1628 人が閲覧しました

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

//MySQL データベースに接続します
$username = "root";
$ パスワード = "";
$データベース = "営業";
$サーバー = "ローカルホスト";

$conn = new mysqli($server, $username, $password, $database);

//接続が成功したかどうかを確認します
if ($conn->connect_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 ファイルのサンプルコードです。

Chart.js データ視覚化アプリケーション

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 サイトの他の関連記事を参照してください。