한국어
한국어
오늘날의 정보 시대에 데이터 시각화는 제품 또는 프로젝트를 측정하는 데 중요한 지표 중 하나가되었습니다. 개발자는 데이터 차트를 올바른 도구와 기술로 제시하는 것이 중요합니다. PHP는 강력한 서버 측 스크립팅 언어로 데이터를 쉽게 처리하고 표시 할 수 있습니다. 이 기사는 PHP 및 Chart.js를 사용하여 데이터 차트 표시 기능을 개발하고 관련 코드 예제를 제공하는 방법을 자세히 설명합니다.
현재 Google 차트, Chart.js 등과 같이 시장에서 선택할 수있는 다양한 오픈 소스 데이터 차트 라이브러리가 있습니다. 다양한 개발 요구를 충족시키기 위해 광범위한 차트 유형 및 사용자 정의 옵션을 제공합니다.
이 기사에서는 PHP와 함께 데이터 차트 디스플레이 기능을 개발하는 방법을 보여주는 예제로 Chart.js를 취합니다. Chart.js는 다양한 차트 유형을 지원하고 주요 현대식 브라우저와 호환되는 경량 JavaScript 차트 라이브러리입니다.
먼저, 우리는 Chart.js 라이브러리를 프로젝트에 소개해야합니다. CDN을 통해 소개하거나 로컬로 다운로드하여 호스팅 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>데이터 차트 표시</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
다음으로 판매 데이터가 포함 된 데이터베이스 테이블이 있다고 가정 해 봅시다.이 분야에는 판매 및 판매 날짜와 같은 정보가 포함되어 있습니다. PHP를 통해 데이터베이스에서 데이터를 가져 와서 프론트 엔드 차트로 전달해야합니다.
<?php
// 데이터베이스에 연결했다고 가정하십시오，데이터베이스 연결 객체를 가져옵니다$conn
$sql = "SELECT * FROM sales";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// 데이터를 변환합니다JSON체재
$jsonData = json_encode($data);
?>
다음으로 PHP가 전달한 데이터를 JavaScript를 통해 Chart.js로 전달하고 차트로 전달해야합니다. 다음 코드는 판매 데이터를 처리하고 표시하는 방법을 보여줍니다.
<script>
// 얻다PHP통과JSON데이터
var data = <?php echo $jsonData; ?>;
var labels = [];
var values = [];
// 遍历데이터并提取销售日期和매상
data.forEach(function(item) {
labels.push(item.date);
values.push(item.amount);
});
// 만들다Chart객체와 차트를 렌더링합니다
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar', // 차트 유형
data: {
labels: 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>
기본 차트 디스플레이 외에도 실제 요구에 따라 데이터를 추가로 처리 할 수 있습니다. 예를 들어, 필터링, 데이터를 정렬하거나 차트에 더 많은 보조 정보를 추가 할 수 있습니다.
PHP와 Chart.js를 결합하여 풍부하고 아름다운 데이터 차트 표시 기능을 쉽게 개발할 수 있습니다. 막대 차트, 라인 차트 또는 파이 차트이든, Chart.js는 훌륭한 유연성을 제공하여 데이터를 시각화하고 사용자 경험을 향상시킬 수 있습니다.
이 기사가 귀하에게 도움이되며 PHP 및 Chart.js를 신속하게 시작하여 데이터 차트 기능을 개발하도록 도와주기를 바랍니다.
