PHP와 Chart.js를 사용하여 데이터 시각화 차트 만들기-PHP 튜토리얼-php.cn

PHP와 Chart.js를 사용하여 데이터 시각화 차트 만들기

WBOY

풀어 주다： 2023-05-11 09:58:02

원래의

1614명이 탐색했습니다.

오늘날의 데이터 중심 세계에서 데이터 분석과 데이터 시각화는 필수 도구가 되었습니다. 이러한 맥락에서 인기 있는 네트워크 프로그래밍 언어인 PHP를 사용하면 고도로 대화형이고 동적인 웹사이트와 애플리케이션을 구축할 수 있습니다. 데이터를 더 잘 표시하려면 해당 데이터 시각화 라이브러리를 사용해야 합니다. 이 기사에서는 PHP와 Chart.js 라이브러리를 사용하여 데이터 시각화 차트를 만드는 방법을 설명합니다.

1. Chart.js 개요

Chart.js는 간단하고 반응성이 뛰어나며 사용자 정의 가능한 차트를 만들기 위한 HTML5 Canvas 기반 JavaScript 라이브러리입니다. 막대형 차트, 선형 차트, 원형 차트 등 선택할 수 있는 다양한 유형의 차트가 포함되어 있으며 API를 통해 유연하게 사용자 정의할 수 있습니다.

2. Chart.js 설치 및 사용

먼저 최신 버전의 Chart.js를 다운로드하여 프로젝트 디렉터리 아래 lib 디렉터리에 추출합니다. 그런 다음 차트를 사용해야 하는 페이지에 Chart.js 스크립트 파일을 도입해야 합니다.

<script src="./lib/Chart.min.js"></script>

로그인 후 복사

다음으로 차트를 렌더링할 캔버스 태그를 생성해야 합니다.

<canvas id="myChart" width="400" height="400"></canvas>

로그인 후 복사

마지막으로 JavaScript에서 새 Chart 개체를 인스턴스화하고 해당 옵션을 구성해야 합니다. 예:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

로그인 후 복사

위 코드는 막대 차트를 만들고 해당 데이터를 추가합니다.

3. 데이터베이스에서 데이터 가져오기

일반적으로 차트에 표시하려면 데이터베이스에서 데이터를 가져와야 합니다. 다음은 PHP를 사용하여 MySQL 데이터베이스에서 데이터를 가져오는 예입니다.

먼저 MySQL 데이터베이스에 연결해야 합니다. 예:

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

로그인 후 복사

다음으로 데이터베이스를 쿼리하고 데이터를 가져와야 합니다. 예:

$sql = "SELECT id, name, votes FROM candidates";
$result = $conn->query($sql);

$candidates = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $candidates[] = [
            'name' => $row['name'],
            'votes' => $row['votes']
        ];
    }
}

로그인 후 복사

이것은 후보자 테이블에서 필요한 데이터를 가져와서 $candidates 배열에 저장합니다.

마지막으로 해당 차트를 생성하려면 Chart.js에 데이터를 전달해야 합니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: <?php echo json_encode(array_column($candidates, 'name')); ?>,
        datasets: [{
            label: '# of Votes',
            data: <?php echo json_encode(array_column($candidates, 'votes')); ?>,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

로그인 후 복사

이렇게 하면 획득한 데이터를 기반으로 막대 차트가 생성되어 페이지에 렌더링됩니다.

4. 요약

이 글에서는 PHP와 Chart.js 라이브러리를 사용하여 데이터 시각화 차트를 만드는 방법을 소개했습니다. Chart.js 라이브러리를 사용하고 MySQL 데이터베이스에서 데이터를 가져와 PHP를 통해 Chart.js에 데이터를 전달하는 방법을 배웠습니다. 이를 통해 데이터 시각화를 간단한 프로세스로 만드는 동시에 데이터 기반 의사결정을 위한 귀중한 정보를 제공합니다.

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