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

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

PHPz

リリース： 2023-12-17 17:40:01

オリジナル

862 人が閲覧しました

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

php インターフェイスと ECharts を使用してデータフィルタリングと統計グラフのフィルタリングを実装する方法には、特定のコードサンプルが必要です

データ視覚化では、統計グラフの使用が重要です。共通データの表示方法。実際のアプリケーションでは、さまざまなニーズを満たすためにデータをスクリーニングおよびフィルタリングする必要があることがよくあります。 PHP インターフェイスと EChart は、データフィルタリングと統計グラフのフィルタリングを実装できる 2 つの広く使用されているツールです。

以下では、例を使用して、PHP インターフェイスと EChart を使用してデータフィルタリングとフィルタリングを実装する方法を示します。

まず、複数の都市の気温データを含むデータソースを準備する必要があります。データソースには、データベーステーブル、CSV ファイル、JSON ファイルなどを使用できます。次の内容を含む JSON ファイルを準備したとします。

[
    {"city": "北京", "temperature": 25},
    {"city": "上海", "temperature": 28},
    {"city": "广州", "temperature": 30},
    {"city": "深圳", "temperature": 31},
    {"city": "成都", "temperature": 26},
    {"city": "重庆", "temperature": 29}
]

ログイン後にコピー

次に、データフィルタリングとフィルタリングリクエストを処理するための PHP インターフェイスを作成する必要があります。 PHPのファイル操作機能を利用して、データソースファイルを読み込み、クエリ条件に基づいてデータをフィルタリングすることができます。以下は簡単なサンプルコードです:

<?php

// 读取数据源文件
$data = file_get_contents('data.json');

// 解析 JSON 数据
$data = json_decode($data, true);

// 筛选和过滤数据
if (isset($_GET['city'])) {
    $city = $_GET['city'];
    $filteredData = [];
    
    foreach ($data as $item) {
        if ($item['city'] === $city) {
            $filteredData[] = $item;
        }
    }

    echo json_encode($filteredData);
} else {
    echo json_encode($data);
}

?>

ログイン後にコピー

上記のコードでは、まず file_get_contents 関数を使用してデータソースファイルを読み取り、json_decode## を通じてそれを PHP に解析します。 # 関数配列。次に、クエリ条件として PHP インターフェイスに渡される都市名があるかどうかを判断します。存在する場合は、データ配列を走査し、都市名に基づいてフィルター処理し、フィルター処理されたデータを新しい配列に返します。クエリ条件がない場合は、元のデータを直接返します。

PHP インターフェイスを使用した後、フロントエンドページで ECharts を使用してデータを表示し、フィルターする必要があります。以下は、ECharts の導入および初期化コードを含む単純な HTML ページコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 数据筛选和过滤示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px;height:400px;"></div>
    <select id="citySelect">
        <option value="">全部城市</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="成都">成都</option>
        <option value="重庆">重庆</option>
    </select>

    <script>
    // 使用 Ajax 请求 PHP 接口获取数据
    function fetchData(city) {
        var url = 'api.php';

        if (city) {
            url += '?city=' + encodeURIComponent(city);
        }

        return fetch(url)
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                return data;
            });
    }

    // 初始化图表
    var chart = echarts.init(document.getElementById('chart'));
    var option = {
        title: {
            text: '城市气温'
        },
        tooltip: {},
        legend: {
            data:['城市气温']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '城市气温',
            type: 'bar',
            data: []
        }]
    };

    // 初始渲染图表
    fetchData().then(function(data) {
        var cities = [];
        var temperatures = [];

        for (var i = 0; i < data.length; i++) {
            cities.push(data[i].city);
            temperatures.push(data[i].temperature);
        }

        option.xAxis.data = cities;
        option.series[0].data = temperatures;

        chart.setOption(option);
    });

    // 监听下拉框选择变化事件，根据选择的值重新获取数据并更新图表
    var citySelect = document.getElementById('citySelect');
    citySelect.addEventListener('change', function() {
        var city = citySelect.value;

        fetchData(city).then(function(data) {
            var cities = [];
            var temperatures = [];

            for (var i = 0; i < data.length; i++) {
                cities.push(data[i].city);
                temperatures.push(data[i].temperature);
            }

            option.xAxis.data = cities;
            option.series[0].data = temperatures;

            chart.setOption(option);
        });
    });
    </script>
</body>
</html>

ログイン後にコピー

上記の HTML コードでは、

同時に、チャートの初期化時に、

fetchData 関数を呼び出して取得したデータを処理し、処理されたデータを ECharts の option## に割り当てました #オブジェクトを作成し、最後に chart.setOption(option) を通じてチャートをレンダリングします。上記のサンプルコードにより、PHPインターフェースとEChartsに基づいた統計グラフデータのフィルタリングとフィルタリングを実装できます。実際のアプリケーションでは、特定のニーズに応じてこれらのコードを変更および拡張し、より複雑なデータ分析と視覚化のニーズを満たすことができます。

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