한국어
한국어
비즈니스 시스템이 데이터 처리 기능을 계속 개선함에 따라 개발자는 종종 프론트 엔드에 구조화되고 거대한 데이터 컨텐츠를 제시해야합니다. 특히 월간 판매 및 액세스 트렌드와 같은 통계 정보에 직면 할 때, 프론트 엔드 차트를 명확하게 제시하는 방법으로 성능이 핵심 문제가되었습니다. 이 기사는 PHP 백엔드 데이터 인터페이스를 Vue.js 프론트 엔드 프레임 워크와 결합하고 차트 .JS 라이브러리와 협력하여 반응 형 빅 데이터 통계 차트를 구축하는 방법을 소개합니다.
코딩을 시작하기 전에 개발 환경이 다음 조건을 충족하는지 확인하십시오.
Chart.js는 유연한 HTML5 차트 라이브러리입니다. 이 기사에서는 CDN을 통해 소개했습니다.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
이 예에서는 데이터베이스의 판매 레코드를 쿼리하고 프론트 엔드 호출에 대한 JSON에서 결과를 출력합니다.
// 데이터베이스에 연결하십시오
$conn = new mysqli($servername, $username, $password, $dbname);
// 연결을 확인하십시오
if ($conn->connect_error) {
die("연결이 실패했습니다: " . $conn->connect_error);
}
// 총 월간 판매를 확인하십시오
$sql = "SELECT SUM(amount) AS total_amount, MONTH(date) AS month FROM sales GROUP BY MONTH(date)";
$result = $conn->query($sql);
// 결과 배열을 구축하십시오
$data = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// 산출JSON데이터
echo json_encode($data);
vue.js는 PHP 백엔드에서 데이터를 얻고 차트를 렌더링 할 책임이 있습니다. 다음은 일반적인 구성 요소 구현입니다.
<template>
<div>
<canvas id="chart"></canvas>
</div>
</template>
<script>
import axios from 'axios';
export default {
mounted() {
axios.get('http://localhost/api/sales.php')
.then((response) => {
this.createChart(response.data);
})
.catch((error) => {
console.error(error);
});
},
methods: {
createChart(data) {
const labels = data.map(item => item.month);
const values = data.map(item => item.total_amount);
new Chart('chart', {
type: 'bar',
data: {
labels,
datasets: [{
label: '총 판매',
data: values,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
}
}
</script>
<p>빅 데이터 시나리오에서 차트의 렌더링 효율성을 더욱 향상시키기 위해 다음 전략을 결합 할 수 있습니다.
PHP의 강력한 데이터 처리 기능을 Vue.js의 Flexible 프론트 엔드 구성 요소와 결합하고 Chart.js 비주얼 차트와 결합하여 대형 데이터 세트의 그래픽 표시 요구를 쉽게 처리 할 수 있습니다. 이 방법은 특히 전자 상거래, 재무 분석, 사용자 행동 추적 및 기타 시나리오에서 실용적입니다. 이 튜토리얼이 프로젝트에 도움이되기를 바랍니다.
