phpインターフェースとEChartsを使ってデータ可視化統計グラフを実現する方法-PHPチュートリアル-php.cn

phpインターフェースとEChartsを使ってデータ可視化統計グラフを実現する方法

PHPz

リリース： 2023-12-17 18:02:01

オリジナル

755 人が閲覧しました

phpインターフェースとEChartsを使ってデータ可視化統計グラフを実現する方法

PHP インターフェイスと ECharts を使用してデータ視覚化チャートを実装する方法

はじめに
Web アプリケーションでは、データ視覚化チャートは大量のデータを表示および分析するのに非常に役立ちます。データの重要なデータです。この記事では、PHP インターフェイスと ECharts ライブラリを使用してデータ視覚化統計グラフを実装する方法を紹介し、読者に具体的なコード例を提供します。

前提条件
始める前に、次の前提条件が満たされていることを確認する必要があります。
PHP 実行環境がインストールされていること。
データベースはデータを保存するためにサーバー上に構築され、読み取り可能なデータテーブルを持ちます。
ECharts ライブラリをインストールした後、CDN を通じて、または公式 Web サイトからインストールパッケージをローカルにダウンロードできます。
PHP インターフェイスの作成
PHP インターフェイスは、データベースからデータを読み取り、それを JSON 形式でフロントエンドページに返すために使用されます。以下は簡単なサンプルコードです:

<?php
// 连接数据库
$mysqli = new mysqli("localhost", "username", "password", "database");

// 检查连接是否成功
if ($mysqli->connect_error) {
    die("数据库连接失败：" . $mysqli->connect_error);
}

// 查询数据
$query = "SELECT * FROM data_table";
$result = $mysqli->query($query);

// 将结果转换为JSON格式
$data = [];
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// 返回结果
header('Content-Type: application/json');
echo json_encode($data);

// 关闭数据库连接
$mysqli->close();
?>

ログイン後にコピー

上記のコードは、まず mysqli クラスを通じてデータベースに接続し、「data_table」という名前のデータテーブルをクエリします。次に、クエリ結果は配列に変換され、最終的に配列が JSON 形式でフロントエンドページに返されます。

フロントエンドページの作成
データ視覚化チャートを表示するには、HTML ページを作成し、ECharts ライブラリを導入し、jQuery ライブラリを使用して Ajax リクエストを行う必要があります。以下はサンプルコードです。

<!DOCTYPE html>
<html>
<head>
    <title>数据可视化统计图</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
    <script type="text/javascript">
        // 使用Ajax请求PHP接口获取数据
        $.ajax({
            url: "api.php",
            type: "GET",
            dataType: "json",
            success: function(data) {
                // 初始化ECharts实例
                var chart = echarts.init(document.getElementById("chart"));

                // 处理数据并设置图表选项
                var option = {
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.name) // 假设返回的数据中有"name"字段
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(item => item.value), // 假设返回的数据中有"value"字段
                        type: 'bar'
                    }]
                };

                // 使用配置项显示图表
                chart.setOption(option);
            }
        });
    </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、まず ECharts ライブラリと jQuery ライブラリを導入し、次に Ajax リクエストを通じてデータを取得します。次に、ECharts インスタンスを作成し、データを正常に取得した後にチャートオプションを構成します。最後に、設定項目を使用してグラフを表示します。

データベースの準備とデータ表示
実際の運用では、統計グラフに必要なデータを自社の業務ニーズに合わせて準備し、データベースに格納する必要があります。サンプルコードでは、データテーブルに「name」フィールドと「value」フィールドがあり、それぞれデータの名前と値が格納されているものとします。ニーズに応じて、データテーブル構造に合わせてコードを調整できます。

上記の手順を完了した後、フロントエンドページにアクセスすると、統計グラフを含むデータ視覚化ページが表示されます。

概要
この記事では、PHP インターフェイスと ECharts ライブラリを使用してデータ視覚化チャートを実装する方法を紹介します。 PHP インターフェイスを作成することにより、データベースからデータを読み取り、JSON 形式でフロントエンドページに返します。その後、ECharts ライブラリを使用してグラフを作成し、データを表示します。この記事が、Web 開発でデータ視覚化統計グラフを適用する読者に役立つことを願っています。

以上がphpインターフェースとEChartsを使ってデータ可視化統計グラフを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。