ECharts と PHP インターフェイスを介して統計グラフのデータフィルタリングと並べ替えを実装する方法-PHPチュートリアル-php.cn

ECharts と PHP インターフェイスを介して統計グラフのデータフィルタリングと並べ替えを実装する方法

WBOY

リリース： 2023-12-17 22:56:01

オリジナル

780 人が閲覧しました

ECharts と PHP インターフェイスを介して統計グラフのデータフィルタリングと並べ替えを実装する方法

ECharts と PHP インターフェイスを使用して統計グラフのデータフィルタリングと並べ替えを実装する方法

最新のデータ分析と視覚化の分野では、ECharts は強力な JavaScript グラフライブラリです。 . さまざまなデータ視覚化プロジェクトで広く使用されています。同時に、人気のあるサーバー側プログラミング言語としての PHP を ECharts と組み合わせて、データのフィルタリングと並べ替えに便利なソリューションを提供できます。この記事では、ECharts と PHP インターフェイスを使用して統計グラフのデータフィルタリングと並べ替えを実装する方法を紹介し、具体的なコード例を示します。

1. PHP 環境をセットアップし、ECharts を構成する

まず、PHP 開発環境をセットアップし、ECharts を構成する必要があります。具体的なインストール手順については、PHP および ECharts の公式ドキュメントを参照してください。

2. HTML ページと JavaScript コードの作成

ルートディレクトリに HTML ファイルを作成し、index.html という名前を付け、

タグに ECharts 関連のリソースファイルを導入します。 ##

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts数据筛选和排序示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px;height:400px;"></div>
    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

同じディレクトリに script.js という名前の JavaScript ファイルを作成し、その中に ECharts 関連のコードを記述します:

// 使用ECharts的示例数据进行演示
var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    {name: '广州', value: 300},
    {name: '深圳', value: 400},
    {name: '成都', value: 500}
];

// 创建ECharts实例
var chart = echarts.init(document.getElementById('chart'));

// 设置图表的配置项和数据
var option = {
    title: {
        text: '统计图'
    },
    tooltip: {},
    xAxis: {
        data: data.map(function(item) {
            return item.name;
        })
    },
    yAxis: {},
    series: [{
        name: '数量',
        type: 'bar',
        data: data.map(function(item) {
            return item.value;
        })
    }]
};

// 使用配置项和数据生成图表
chart.setOption(option);

ログイン後にコピー

3. PHP インターフェイスの作成

PHP の作成サーバー側に api.php という名前のファイルを作成し、その中にデータのフィルタリングと並べ替えを処理するコードを記述します。

<?php
// 根据请求参数筛选和排序数据
$action = $_GET['action'];

if ($action == 'filter') {
    // 根据条件筛选数据
    $filter = $_GET['filter'];
    // 进行数据筛选的逻辑处理
    // ...

    // 返回筛选后的数据
    echo json_encode($filteredData);
} else if ($action == 'sort') {
    // 根据条件排序数据
    $sort = $_GET['sort'];
    // 进行数据排序的逻辑处理
    // ...

    // 返回排序后的数据
    echo json_encode($sortedData);
}
?>

ログイン後にコピー

4. JavaScript コードで PHP インターフェイスを呼び出します。

次のコードをscript.js ファイルを使用して PHP インターフェイスにデータリクエストを送信し、グラフを更新します:

// 发送筛选请求
function filterData(filter) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var filteredData = JSON.parse(xhr.responseText);
            // 更新图表数据
            option.xAxis.data = filteredData.map(function(item) {
                return item.name;
            });
            option.series[0].data = filteredData.map(function(item) {
                return item.value;
            });
            chart.setOption(option);
        }
    };
    xhr.open('GET', 'api.php?action=filter&filter=' + filter, true);
    xhr.send();
}

// 发送排序请求
function sortData(sort) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var sortedData = JSON.parse(xhr.responseText);
            // 更新图表数据
            option.xAxis.data = sortedData.map(function(item) {
                return item.name;
            });
            option.series[0].data = sortedData.map(function(item) {
                return item.value;
            });
            chart.setOption(option);
        }
    }
    xhr.open('GET', 'api.php?action=sort&sort=' + sort, true);
    xhr.send();
}

// 示例：点击按钮筛选数据
document.getElementById('filterBtn').onclick = function() {
    var filter = document.getElementById('filterInput').value;
    filterData(filter);
};

// 示例：点击按钮排序数据
document.getElementById('sortBtn').onclick = function() {
    var sort = document.getElementById('sortInput').value;
    sortData(sort);
};

ログイン後にコピー

5. 実行してテスト

ブラウザでindex.html ファイルを開き、フィルターまたは並べ替えを入力します必要に応じて条件を選択し、対応するボタンをクリックします。 PHP インターフェイスとのデータ対話を通じて、ECharts チャートは返された結果に基づいて自動的に更新され、データのフィルタリングおよび並べ替え機能が実装されます。

概要

上記の手順により、ECharts と PHP インターフェイスを介して統計グラフのデータフィルタリングと並べ替えを正常に実装できました。特定の PHP インターフェイスを作成し、JavaScript コードでこれらのインターフェイスを呼び出してサーバーとデータをやり取りすることで、チャートデータの柔軟な制御を実現し、データのフィルタリングと並べ替えをより便利かつ柔軟に行うことができます。この記事が、ECharts と PHP インターフェイスの関連知識を理解し、適用するのに役立つことを願っています。

以上がECharts と PHP インターフェイスを介して統計グラフのデータフィルタリングと並べ替えを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。