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 스크립트의 샘플 코드입니다.

e59823d6ad7daf47f821d552249da0ccconnect_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 파일의 샘플 코드입니다.

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Chart.js 데이터 시각화 응용 프로그램6e916e0f7d1e588d4f442bf645aedb2f
f2e8dc11142a8fde1bec25a0126afc162cacc6d41bbb37262a98f745aa00fbf0
32d8a8489ccf6ad22016e69b0555932f 2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
008f8b01c082af3d331c181c369562b4c2caaf3fc160dd2513ce82f021917f8b
31bf1d5b4e24f9a2df2a8454f6e05fa8deeb7d62f119a9af0803e6e8b6c2645a
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

우리는 Chart.js 라이브러리의 JavaScript 파일을 사용한다는 점에 유의하세요. 또한 HTML 파일에는 사용자 정의 JavaScript 파일(app.js)이 포함되어 있습니다. 이는 데이터를 쿼리하고 차트를 그리는 데 사용되는 JavaScript 파일입니다.

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

//MySQL 데이터베이스 쿼리
function loadSalesData(callback) {

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();

}

//선형 차트 그리기
function drawLineChart(id, labels, data, label) {

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: '金额'
                }
            }]
        }
    }
});

}

//데이터 로드 및 차트 그리기
loadSalesData(function(response) {

//解析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, '利润');

});

loadSalesData 및 drawLineChart라는 두 가지 함수를 정의했습니다. loadSalesData 함수는 PHP 스크립트에서 JSON 형식 데이터를 로드하는 데 사용되며, drawLineChart 함수는 Canvas 요소에 꺾은선형 차트를 그리는 데 사용됩니다.

우리는 꺾은선형 차트를 그리고 판매 수익 및 이익 데이터를 사용하는 Chart.js 라이브러리의 예를 사용했습니다.

4단계: 앱 실행

이제 앱을 실행할 준비가 되었습니다! HTML 파일과 JavaScript 파일을 웹 서버에 업로드하고 브라우저에서 HTML 파일을 열면 됩니다. 우리는 두 개의 그래프를 얻을 것입니다. 하나는 판매 수익 그래프이고 다른 하나는 이익 그래프입니다.

결론

이 기사에서는 PHP와 Chart.js를 사용하여 다중 차트 데이터 시각화 애플리케이션을 만드는 방법을 다루었습니다. 우리는 데이터베이스 테이블을 만드는 것으로 시작한 다음 데이터를 쿼리하는 PHP 스크립트를 만들었습니다. 다음으로 HTML 파일과 JavaScript 파일에 있는 Chart.js 라이브러리를 사용하여 차트를 처리하고 그렸습니다. 마지막으로 애플리케이션을 실행하고 두 개의 아름다운 선 차트를 얻습니다. PHP와 Chart.js를 사용하여 데이터 시각화 애플리케이션을 만드는 것은 매우 간단하며 이 기술을 활용하여 모든 웹 애플리케이션에서 데이터를 시각화할 수 있습니다.

위 내용은 PHP 및 Chart.js를 사용하여 다중 차트 데이터 시각화 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!