日本語
日本語
Web 開発では、データの視覚化は、ユーザーがデータの傾向とパターンを直感的に理解するのに役立ちます。 PHP インターフェイスと ECharts ライブラリを組み合わせることで、バックエンド データを Web ページ上に動的な統計グラフの形式で簡単に表示し、データのリアルタイムの視覚化を実現できます。
開始する前に、次の環境の準備が完了していることを確認してください。
PHP インターフェイスの機能は、データベースからデータを取得し、それを JSON 形式でフロントエンドに返すことです。基本的な例を次に示します。
<?php
// データベースに接続する
$mysqli = new mysqli("localhost", "username", "password", "database");
// 接続を確認してください
if ($mysqli->接続エラー) {
die("データベース接続に失敗しました: " . $mysqli->connect_error);
}
// データをクエリ $query = "SELECT * FROM data_table";
$result = $mysqli->query($query);
// JSON形状に変換 $data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
//結果のヘッダーを戻るします('Content-Type: application/json');
エコー json_encode($data);
// 接続を近いじます $mysqli->close();
?>このコードは、mysqli を通じてデータベースに接続し、テーブル内のデータを読み取り、フロントエンド呼び出し用に JSON 形式で返します。
フロントエンド部分は主に、Ajax リクエストを通じて PHP インターフェイスから返されたデータを取得し、EChart を使用して統計グラフを生成する役割を果たします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP および ECharts データ視覚化の例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width:800px;height:400px;"></div>
<script type="text/javascript">
$.ajax({
url: "api.php",
type: "GET",
dataType: "json",
success: function(data) {
var chart = echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: data.map(item => item.name)
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(item => item.value),
type: 'bar'
}]
};
chart.setOption(option);
}
});
</script>
</body>
</html>この HTML ページは、jQuery の Ajax 関数を通じて PHP インターフェイスを呼び出します。データの取得に成功すると、ECharts ヒストグラムを動的に生成して、バックエンド データのフロントエンド視覚化を実現します。
データベースには、次の 2 つの基本フィールドを含むデータ テーブルを作成することをお勧めします。
フィールド構造はビジネス ニーズに応じて調整でき、クエリ ステートメントはインターフェイス内で同期的に変更できます。
PHPインターフェースとEChartsの組み合わせにより、開発者はデータの視覚化表示を効率的に実現できます。バックエンド データベースからデータを読み取り、フロントエンド EChart を通じて動的にレンダリングして、完全に機能し、高度にインタラクティブな統計グラフ ページを構築します。この方法は、レポート表示、ビジネス分析、監視システムなどのさまざまな Web アプリケーション シナリオに適しています。
