ECharts 및 PHP 인터페이스를 통해 실시간 통계 차트를 표시하는 방법
- WBOY원래의
- 2023-12-17 16:35:431181검색
ECharts 및 PHP 인터페이스를 통해 실시간 통계 차트를 표시하는 방법
인터넷과 빅데이터 기술의 급속한 발전으로 데이터 시각화가 중요한 부분이 되었습니다. 뛰어난 오픈 소스 JavaScript 데이터 시각화 라이브러리인 ECharts는 다양한 통계 차트를 간단하고 효율적으로 표시하는 데 도움이 됩니다. 이 기사에서는 ECharts 및 PHP 인터페이스를 통해 실시간 통계 차트를 표시하는 방법을 소개하고 관련 코드 예제를 제공합니다.
1. 준비
시작하기 전에 몇 가지 준비를 해야 합니다.
- ECharts 라이브러리 설치: ECharts 공식 웹사이트(http://echarts.apache.kr)에서 최신 버전의 ECharts 라이브러리를 다운로드할 수 있습니다. org/)를 프로젝트에 도입합니다.
- PHP 환경 설치: 데이터 인터페이스를 제공하기 위해 간단한 PHP 환경을 구축해야 합니다. XAMPP, WAMP 등의 통합 개발 환경을 설치하거나, Linux 서버에 LAMP 환경을 구축할 수 있습니다.
2. 데이터베이스 및 데이터 테이블 만들기
여기서는 설명의 편의를 위해 시간당 주문 수를 표시한다고 가정하고 간단한 예를 사용합니다. 먼저, 주문 데이터를 저장하기 위해 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. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!