ECharts と PHP インターフェイスを介してリアルタイム統計グラフを表示する方法
- WBOYオリジナル
- 2023-12-17 16:35:431113ブラウズ
ECharts と PHP インターフェイスを介してリアルタイムの統計グラフを表示する方法
インターネットとビッグ データ テクノロジの急速な発展により、データの視覚化が重要な部分になりました。 。 ECharts は、優れたオープンソース JavaScript データ視覚化ライブラリとして、さまざまな統計グラフを簡単かつ効率的に表示するのに役立ちます。この記事では、ECharts および PHP インターフェイスを介してリアルタイム統計グラフを表示する方法を紹介し、関連するコード例を示します。
1. 準備
始める前に、いくつかの準備をする必要があります:
- ECharts ライブラリをインストールします: ECharts の公式 Web サイト (http: //echarts.apache .org/) を使用して、ECharts ライブラリの最新バージョンをダウンロードし、プロジェクトに導入します。
- PHP 環境のインストール: データ インターフェイスを提供するために、単純な PHP 環境を構築する必要があります。 XAMPPやWAMPなどの統合開発環境をインストールしたり、Linuxサーバー上にLAMP環境を構築したりできます。
2. データベースとデータ テーブルの作成
デモンストレーションの便宜上、ここでは 1 時間あたりの注文数を表示することを想定した簡単な例を使用します。まず、注文データを保存するために MySQL データベースにデータ テーブルを作成する必要があります。
CREATE TABLE `orders` ( `id` int(11) NOT NULL AUTO_INCREMENT, `time` datetime DEFAULT NULL, `count` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
このテーブルには、注文 ID、注文時間、注文数量という 3 つのフィールドが含まれています。
3. PHP インターフェイスの作成
データ インターフェイスのロジックを処理するために、PHP プロジェクトに「api.php」という名前の新しいファイルを作成します。このインターフェースを通じて、最新の注文データを取得できます。簡単な例を次に示します。
<?php
// 引入数据库配置文件
include('config.php');
// 连接数据库
$conn = mysqli_connect($db_host, $db_user, $db_password, $db_name);
if (!$conn) {
die("连接数据库失败: " . mysqli_connect_error());
}
// 获取最新的订单数据
$sql = "SELECT * FROM orders ORDER BY time DESC LIMIT 1";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
// 返回JSON格式的订单数据
echo json_encode($row);
// 关闭数据库连接
mysqli_close($conn);
?>このコードは、まずデータベースに接続し、次に最新の注文データをクエリして、それを JSON 形式で返します。
4. フロントエンド ページを作成する
次に、フロントエンド ページに ECharts ライブラリを導入し、リアルタイムの統計グラフの表示を実現する必要があります。ページに「index.php」という名前を付けるとします。簡単な例を次に示します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时统计图展示</title>
<!-- 引入ECharts库 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 统计图容器 -->
<div id="chart" style="height: 400px;"></div>
<!-- JavaScript代码 -->
<script>
// 创建ECharts实例
var myChart = echarts.init(document.getElementById('chart'));
// 定义初始数据
var data = [];
// 请求接口获取数据
function fetchData() {
// 发送HTTP请求
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = JSON.parse(xmlhttp.responseText);
var time = new Date(result.time);
var count = result.count;
// 更新数据
data.push({
name: time.getHours() + ':00',
value: count
});
// 显示统计图
myChart.setOption({
xAxis: {
data: data.map(function(item) {
return item.name;
})
},
series: [{
data: data.map(function(item) {
return item.value;
})
}]
});
}
};
xmlhttp.open("GET", "api.php", true);
xmlhttp.send();
}
// 循环调用接口，以实现实时刷新
setInterval(fetchData, 1000);
</script>
</body>
</html>この HTML コードでは、最初に ECharts ライブラリを導入し、統計グラフを表示するコンテナをページ内に作成します。次に、JavaScript コードを通じて HTTP リクエスト インターフェイスを実装し、最新の注文データを取得してデータに追加し、最後に ECharts の setOption メソッドを使用して統計グラフを表示します。リアルタイムの更新効果を実現するために、JavaScript の setInterval 関数を使用してインターフェイスを毎秒呼び出します。
5. プロジェクトの実行
ブラウザで「index.php」ページを開くと、リアルタイム統計グラフが表示されます。毎秒、ページはバックエンドにリクエストを送信して最新の注文データを取得し、それを表示するチャートに追加します。
概要: この記事の導入を通じて、ECharts と PHP インターフェイスを介してリアルタイムの統計グラフを表示する方法を学びました。常に最新のデータを取得しチャートを更新することで、データの変化をリアルタイムに監視・表示することができます。これは、データ分析とビジネス上の意思決定に重要な影響を及ぼします。
(注: 上記のコード例は参考用です。具体的な実装は実際の状況に応じて調整されます)
以上がECharts と PHP インターフェイスを介してリアルタイム統計グラフを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。