ホームページ >バックエンド開発 >PHPチュートリアル >PHP インターフェースと EChart を使用して、動的に更新されるリアルタイム統計グラフを生成する方法
PHP インターフェースと EChart を使用して、動的に更新されるリアルタイム統計グラフを生成する方法
- 王林オリジナル
- 2023-12-17 08:50:381140ブラウズ
php インターフェイスと EChart を使用して動的に更新されるリアルタイム統計グラフを生成する方法には、特定のコード例が必要です
テクノロジー、データ分析、視覚化の継続的な開発により、企業や組織にとって不可欠なツールの 1 つです。 ECharts は、人気のある JavaScript データ視覚化ライブラリとして、データ視覚化に推奨されるツールの 1 つとなっています。 PHP インターフェイスと ECharts を組み合わせることで、より柔軟で動的なデータ視覚化効果を実現できます。
この記事では、PHP インターフェイスと EChart を使用して動的に更新されるリアルタイム統計グラフを生成する方法を紹介し、読者が関連テクノロジと実装方法を理解できるように具体的なコード例を示します。
1. 準備
始める前に、次のテクノロジとツールを理解する必要があります:
- PHP: 一般的に使用されるサーバーサイド プログラミング言語として、 PHP データの読み取りと処理に役立ちます。
- MySQL: MySQL は一般的に使用されるリレーショナル データベースとして、データの保存と管理に役立ちます。
- ECharts: 人気のある JavaScript データ視覚化ライブラリとして、ECharts はグラフの生成と表示に役立ちます。
- Apache サーバー: Apache は一般的な Web サーバー ソフトウェアとして、PHP 環境の構築とコードの実行に役立ちます。
上記のツールとテクノロジーを準備したら、具体的な実装を開始できます。
2. 実装プロセス
次に、PHP インターフェイスと EChart を使用して動的に更新されるリアルタイム統計グラフを生成する方法を紹介し、具体的なコード例を示します。
- データベースの作成
まず、データベースを作成し、データを保存するテーブルを作成する必要があります。ここでは、「stats」という名前のデータベースと、その中にデータを保存するための「data」という名前のテーブルを作成します。
テーブル構造は次のとおりです:
CREATE TABLE `data` ( `id` int(11) NOT NULL AUTO_INCREMENT, `value` int(11) NOT NULL, `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
- php インターフェイスの作成
次に、データを前面に提供するための php インターフェイスを作成する必要があります。終わり。この例では、「get_data.php」という名前のインターフェイスを作成して、最後の 10 個のデータを取得し、JSON 形式でフロントエンドに返します。
<?php
// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}
// 获取数据
$data = array();
$query = "SELECT * FROM data ORDER BY time DESC LIMIT 10";
$result = $mysqli->query($query);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// 返回JSON数据
header('Content-Type: application/json');
echo json_encode($data);
// 关闭数据库连接
$mysqli->close();
?>- フロントエンド ページの作成
次に、データを表示し、グラフを生成するためのフロントエンド ページを作成する必要があります。この例では、「index.html」という名前のページを作成して、最後の 10 個のデータを表示し、リアルタイムで更新される折れ線グラフを生成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts实时统计图</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 400px;"></div>
<script>
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
// 设置图表配置项
var option = {
title: {
text: '实时统计图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
data:['实时数据']
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [{
name: '实时数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
}]
};
chart.setOption(option);
// 定时更新图表数据
setInterval(function() {
$.getJSON('get_data.php', function(data) {
option.series[0].data = data.reverse();
chart.setOption(option);
});
}, 1000);
</script>
</body>
</html>この例では、ECharts JavaScript ライブラリを使用し、折れ線グラフを表示するために「chart」という名前の div を定義します。また、チャート データを 1 秒ごとに更新するタイマーも定義します。
- テスト データの挿入
最後に、システム全体が適切に動作しているかどうかをテストするために、データベースにテスト データを挿入する必要があります。この例では、ランダムに生成された 100 個のデータを「データ」テーブルに挿入します。
次のコードを使用してデータをバッチに挿入できます:
<?php
// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}
// 插入测试数据
for ($i = 1; $i <= 100; $i++) {
$value = rand(1, 100);
$time = date('Y-m-d H:i:s', strtotime('-' . $i . ' seconds'));
$query = "INSERT INTO data (value, time) VALUES ('$value', '$time')";
$result = $mysqli->query($query);
}
// 关闭数据库连接
$mysqli->close();
?>3. 概要
上記の実装プロセスを通じて、php インターフェイスと EChart を使用して生成することができます。動的に更新されるリアルタイム統計グラフ。実際のアプリケーションでは、特定のニーズに応じて調整および変更し、さまざまなデータ視覚化のニーズを満たすことができます。
つまり、PHP インターフェイスと ECharts を組み合わせることで、より柔軟で動的なデータの視覚化を実現し、データ分析と意思決定のための信頼できるツールとサポートを提供できます。
以上がPHP インターフェースと EChart を使用して、動的に更新されるリアルタイム統計グラフを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。