PHP 및 Chart.js를 사용하여 다중 차트 데이터 시각화 애플리케이션 만들기

인터넷의 지속적인 발전으로 인해 특히 전자상거래, 소셜 네트워크, 금융, 제조 등의 분야에서 다양한 네트워크 애플리케이션 및 시스템에서 대량의 데이터가 생성되고 저장됩니다. 이 데이터에서 더 많은 정보를 추출하기 위해 데이터 시각화가 인기 있는 방법이 되었습니다. 데이터를 그래픽 형태로 변환함으로써 사용자는 데이터를 보다 쉽게 이해하고 분석할 수 있습니다. 이 기사에서는 PHP와 Chart.js를 사용하여 다중 차트 데이터 시각화 애플리케이션을 만드는 방법을 다룹니다.

Chart.js란 무엇인가요?

Chart.js는 대화형, 동적 및 반응형 차트를 생성할 수 있는 오픈 소스 JavaScript 라이브러리입니다. 기둥형 차트, 원형 차트, 꺾은선형 차트 등 다양한 유형의 차트를 지원합니다. Chart.js는 간결하고 아름다운 차트를 자동으로 생성하기 위해 약간의 구성과 일부 HTML 태그만 필요합니다. 게다가 Chart.js는 HTML5 기반 Canvas 요소를 사용하여 차트를 렌더링하므로 HTML5를 지원하는 브라우저에서 실행할 수 있습니다.

PHP와 Chart.js를 사용하여 다중 차트 데이터 시각화 애플리케이션 만들기

이 튜토리얼에서는 PHP와 Chart.js를 사용하여 간단한 데이터 시각화 애플리케이션을 만드는 방법을 소개합니다. 데이터베이스로는 MySQL을 사용하고 데이터 쿼리 및 시각화에는 PHP와 Chart.js를 사용합니다.

1단계: 데이터베이스 테이블 생성

먼저 "sales"라는 데이터베이스를 생성하고 그 안에 "sales_data"라는 테이블을 생성해야 합니다. 테이블에는 다음 필드가 포함되어야 합니다.

• id: 자체 증가 ID
• month: 판매 월
• revenue: 판매 수익
• profit: 이익

다음 SQL 문을 사용하여 테이블을 생성합니다.

CREATE TABLE sales_data (
id INT NOT NULL AUTO_INCREMENT,
월 DATE NOT NULL,
수익 DECIMAL(10, 2) NOT NULL,
이익 DECIMAL(10, 2) NOT NULL,
PRIMARY KEY (id)
);

We PHP 코드를 사용하여 일부 시뮬레이션된 판매 데이터를 이 테이블에 삽입합니다.

2단계: PHP 스크립트 만들기

다음으로 MySQL 데이터베이스에 연결하고 판매 데이터를 읽는 PHP 스크립트를 만들어야 합니다. 이 스크립트는 Chart.js에 차트를 표시하는 데 사용할 수 있는 JSON 형식의 데이터를 반환합니다.

다음은 PHP 스크립트의 샘플 코드입니다.

//MySQL 데이터베이스에 연결
$username = "root";
$password = "";
$database = "sales" ;
$server = "localhost";

$conn = new mysqli($server, $username, $password, $database);

//연결 성공 여부 확인
if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

//MySQL 데이터베이스 쿼리
$query = "SELECT * FROM sales_data";
$result = $conn->query($query);

//쿼리 결과를 JSON 형식으로 형식 지정
$data = array( );
while($row = $result->fetch_assoc()) {

$data[] = $row;

}

echo json_encode($data);

//MySQL 연결 닫기
$conn-> ;close();

?>

이 스크립트는 JSON 형식의 문자열을 출력한다는 점에 유의하세요. 이 문자열에는 쿼리된 모든 판매 데이터가 포함됩니다.

3단계: HTML 및 JavaScript 파일 만들기

이제 Chart.js 차트를 표시하기 위한 HTML 파일과 Chart.js 차트를 처리하고 그리는 JavaScript 파일을 만들어야 합니다.

다음은 HTML 파일의 샘플 코드입니다.

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { callback(xhr.responseText); } } xhr.open('GET', 'sales.php'); xhr.send();

var ctx = document.getElementById(id).getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: label, data: data, borderColor: 'rgb(75, 192, 192)', fill: false }] }, options: { responsive: true, title: { display: true, text: '销售收入' }, tooltips: { mode: 'index', intersect: false }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: '月份' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: '金额' } }] } } });

//解析JSON格式的数据 var data = JSON.parse(response); //获取月份和销售收入数据 var months = []; var revenues = []; for (var i = 0; i < data.length; i++) { months.push(data[i].month); revenues.push(data[i].revenue); } //绘制销售收入折线图 drawLineChart('revenue-chart', months, revenues, '销售收入'); //获取月份和利润数据 var profits = []; for (var i = 0; i < data.length; i++) { profits.push(data[i].profit); } //绘制利润折线图 drawLineChart('profit-chart', months, profits, '利润');