Bagaimana untuk melaksanakan penapisan data dan pengisihan carta statistik melalui antara muka ECharts dan php-tutorial php-php.cn

Bagaimana untuk melaksanakan penapisan data dan pengisihan carta statistik melalui antara muka ECharts dan php

WBOY

Lepaskan： 2023-12-17 22:56:01

asal

755 orang telah melayarinya

Bagaimana untuk melaksanakan penapisan data dan pengisihan carta statistik melalui antara muka ECharts dan php

Cara melaksanakan penapisan data dan pengisihan carta statistik melalui antara muka ECharts dan PHP

Dalam bidang analisis dan visualisasi data moden, ECharts, sebagai perpustakaan carta JavaScript yang berkuasa, telah digunakan secara meluas dalam pelbagai projek visualisasi data . Pada masa yang sama, PHP, sebagai bahasa pengaturcaraan sebelah pelayan yang popular, boleh digabungkan dengan ECharts untuk menyediakan penyelesaian yang mudah untuk menapis dan menyusun data. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan PHP untuk melaksanakan penapisan data dan pengisihan carta statistik serta menyediakan contoh kod khusus.

1 Sediakan persekitaran PHP dan konfigurasikan ECharts

Pertama, kita perlu menyediakan persekitaran pembangunan PHP dan mengkonfigurasi ECharts. Untuk langkah pemasangan khusus, sila rujuk dokumentasi rasmi PHP dan ECharts.

2. Buat halaman HTML dan kod JavaScript

Buat fail HTML dalam direktori akar, namakannya index.html dan perkenalkan fail sumber berkaitan ECharts dalam teg

<!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>

Salin selepas log masuk

Dalam direktori yang sama Fail JavaScript bernama script.js dan tulis kod berkaitan ECharts di dalamnya:

// 使用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);

Salin selepas log masuk

3. Cipta antara muka PHP

Buat fail PHP bernama api.php pada bahagian pelayan dan tulis di dalamnya untuk Kod yang mengendalikan penapisan dan pengisihan data :

<?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);
}
?>

Salin selepas log masuk

4. Panggil antara muka PHP dalam kod JavaScript

Tambah kod berikut dalam fail script.js untuk menghantar permintaan data ke antara muka PHP dan kemas kini carta:

// 发送筛选请求
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);
};

Salin selepas log masuk

5. Jalankan Dan uji

Buka index.html dalam penyemak imbas, masukkan syarat penapisan atau isihan mengikut keperluan, dan klik butang yang sepadan. Melalui interaksi data dengan antara muka PHP, carta ECharts akan dikemas kini secara automatik berdasarkan hasil yang dikembalikan, dan melaksanakan fungsi penapisan dan pengisihan data.

Ringkasan

Melalui langkah di atas, kami berjaya melaksanakan penapisan data dan pengisihan carta statistik melalui antara muka ECharts dan PHP. Dengan menulis antara muka PHP tertentu dan memanggil antara muka ini dalam kod JavaScript untuk berinteraksi dengan pelayan untuk data, kami boleh mencapai kawalan fleksibel data carta, menjadikan penapisan dan pengisihan data lebih mudah dan fleksibel. Saya harap artikel ini akan membantu anda memahami dan menggunakan pengetahuan berkaitan antara muka ECharts dan PHP.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penapisan data dan pengisihan carta statistik melalui antara muka ECharts dan php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!