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>
// 使用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);
<?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); } ?>
// 发送筛选请求 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); };
以上がECharts と PHP インターフェイスを介して統計グラフのデータ フィルタリングと並べ替えを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。