PHPインターフェイスとEChartsを使用してデータフィルタリングと統計グラフのフィルタリングを実装する方法
- PHPzオリジナル
- 2023-12-17 17:36:47783ブラウズ
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 インターフェイスに渡される都市名があるかどうかを判断します。存在する場合は、データ配列を走査し、都市名に基づいてフィルター処理し、フィルター処理されたデータを新しい配列に返します。クエリ条件がない場合は、元のデータを直接返します。
<!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 サイトの他の関連記事を参照してください。