한국어
한국어
웹 개발에서 데이터 시각화는 사용자가 데이터 추세와 패턴을 직관적으로 이해하는 데 도움이 될 수 있습니다. PHP 인터페이스와 ECharts 라이브러리를 결합하면 백엔드 데이터를 웹 페이지에 동적 통계 차트 형식으로 쉽게 표시하여 데이터를 실시간으로 시각화할 수 있습니다.
시작하기 전에 다음 환경 준비를 완료했는지 확인하세요.
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[] = $행;
}
//결과 반환 header('Content-Type: application/json');
echo json_encode($data);
// 연결을 닫습니다. $mysqli->close();
?>이 코드는 mysqli를 통해 데이터베이스에 연결하고, 테이블의 데이터를 읽고 프런트엔드 호출을 위해 JSON 형식으로 반환합니다.
프런트 엔드 부분은 주로 Ajax 요청을 통해 PHP 인터페이스에서 반환된 데이터를 얻고 ECharts를 사용하여 통계 차트를 생성하는 일을 담당합니다.
<!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 히스토그램을 동적으로 생성하여 백엔드 데이터의 프런트엔드 시각화를 달성합니다.
데이터베이스에서는 두 가지 기본 필드를 포함하는 데이터 테이블을 생성하는 것이 좋습니다.
필드 구조는 비즈니스 요구에 따라 조정될 수 있으며 쿼리 문은 인터페이스에서 동기적으로 수정될 수 있습니다.
PHP 인터페이스와 ECharts의 결합을 통해 개발자는 데이터 시각화 표시를 효율적으로 실현할 수 있습니다. 백엔드 데이터베이스에서 데이터를 읽은 다음 프런트엔드 ECharts를 통해 동적으로 렌더링하여 완전한 기능을 갖춘 대화형 통계 차트 페이지를 구축합니다. 이 방법은 보고서 표시, 비즈니스 분석, 모니터링 시스템 등 다양한 웹 애플리케이션 시나리오에 적합합니다.
