한국어
한국어
데이터 분석 및 시각화 요구가 증가함에 따라 웹 애플리케이션에서 통계 차트가 점점 더 많이 사용되고 있습니다. PHP와 Vue.js를 결합하면 실시간 데이터 표시가 가능해 차트에 항상 최신 데이터 상태가 반영됩니다. 이 기사에서는 전체 구현 프로세스를 자세히 소개합니다.
시작하기 전에 PHP 및 Vue.js 개발 환경을 설치했는지 확인하고 데이터 인터페이스를 제공하는 PHP 백엔드 서버와 프런트엔드 Vue.js 애플리케이션을 준비하세요.
PHP 백엔드에서는 차트에 필요한 데이터를 제공하는 데이터 인터페이스를 생성해야 합니다. PDO 또는 mysqli를 사용하여 데이터베이스에 액세스하고 쿼리 결과를 JSON 형식으로 프런트 엔드에 반환할 수 있습니다.
<?php
// 데이터베이스에 연결
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
// 데이터 쿼리
$stmt = $pdo-> prepare("SELECT * FROM 통계");
$stmt->실행();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
// JSON 데이터를 반환합니다. header('Content-Type: application/json');
echo json_encode($data);
?>위의 코드는 test라는 MySQL 데이터베이스에 연결하여 통계 테이블의 모든 데이터를 쿼리하고 이를 JSON 형식으로 프런트 엔드에 반환합니다.
프런트 엔드에서는 Vue.js를 사용하여 통계 차트를 표시하고 데이터를 실시간으로 업데이트합니다. 먼저 Vue.js 및 ECharts 라이브러리를 HTML에 도입합니다.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
그런 다음 Vue 인스턴스에서 데이터와 메서드를 정의합니다.
<div id="app">
<div ref="chart" style="width: 600px; height: 400px;"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
chart: null,
data: []
},
mounted() {
this.chart = echarts.init(this.$refs.chart);
this.getData();
},
methods: {
getData() {
fetch('api.php') // 부르다PHP인터페이스
.then(response => response.json())
.then(data => {
this.data = data;
this.updateChart();
});
},
updateChart() {
// 차트 데이터 업데이트 및 다시 렌더링
const option = {
// 차트 구성 매개변수
series: [{
data: this.data
}]
};
this.chart.setOption(option);
}
}
});
</script>위 코드에서 Vue 인스턴스에는 차트를 표시하는 데 사용되는 div 요소가 포함되어 있습니다. 마운트된 라이프 사이클 후크에서 echarts 인스턴스를 초기화하고 getData 메소드를 호출하여 데이터를 얻습니다. getData 메소드는 PHP 인터페이스를 호출하여 가져오기를 통해 JSON 데이터를 얻고, updateChart 메소드를 호출하여 차트를 업데이트합니다.
차트에 데이터 변경 사항이 실시간으로 반영되도록 하려면 타이머를 사용하여 주기적으로 getData 메서드를 호출하면 됩니다.
setInterval(() => {
this.getData();
}, 5000); // 5초마다 데이터 업데이트이 코드는 5초마다 getData 메소드를 실행하여 차트 데이터를 업데이트하고 실시간 표시 효과를 얻습니다.
이 기사에서는 PHP와 Vue.js를 결합하여 통계 차트의 데이터 업데이트를 구현하는 방법을 소개합니다. PHP로 데이터 인터페이스를 제공하고 프런트 엔드에서 Vue.js 및 ECharts를 사용하여 표시함으로써 개발자는 실시간으로 업데이트되는 동적인 데이터 시각화 차트를 쉽게 구현할 수 있습니다. 이 방법은 유연하고 확장하기 쉬우며 다양한 유형의 데이터 통계 시나리오에 적합합니다.
