온라인 차트 및 데이터 시각화 실현을위한 PHP의 실용적인 방법

PHP에서 온라인 차트 및 데이터 시각화 실현 방법

최신 웹 애플리케이션에서 데이터의 그래픽 표시는 사용자 경험을 향상시킬뿐만 아니라 데이터 컨텐츠를보다 직관적으로 이해하는 데 도움이됩니다. PHP와 프론트 엔드 차트 라이브러리의 조합으로 효율적이고 동적 데이터 시각화를 달성 할 수 있습니다. 이 기사는 두 가지 공통 구현 방법 인 Chart.js와 Google 차트를 공유합니다.

Chart.js를 사용하여 차트 표시

Chart.js는 막대 차트, 라인 차트, 파이 차트 및 기타 유형을 지원하는 오픈 소스 JavaScript 차트 라이브러리입니다. PHP에서 JavaScript 코드를 동적으로 생성하고 데이터를 전달함으로써 차트의 자동 표시를 달성 할 수 있습니다.

<?php
// 데이터 정의
$data = array(
    "January" => 10,
    "2 월"=> 20,
    "March"=> 15,
    "4 월"=> 25,
    "may"=> 30,
    "6 월"=> 20
);

// JavaScript 코드 생성 $ jscode = "
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: " . json_encode(array_keys($data)) . ",
            datasets: [{
                label: 'Number of Sales',
                data: " . json_encode(array_values($data)) . ",
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
";

// 출력 차트 에코 "<canvas id='myChart' width='400' height='400'></canvas> ";
echo $ jscode;
?>

이 코드에서 PHP는 데이터를 준비하고 해당 JavaScript 스크립트를 생성하고 HTML의 캔버스 태그를 통해 차트 렌더링을 완료해야합니다.

Google 차트를 사용하여 시각적 차트를 생성합니다

Google 차트는 Google이 제공하는 무료 차트 솔루션으로, PIE 차트, 맵, 막대 차트 등과 같은 다양한 유형의 차트를 지원하는 무료 차트 솔루션입니다. PHP와 함께 사용하면 데이터를 동적으로 구축하고 JavaScript 구성으로 출력 할 수 있습니다.

<?php
// 데이터 정의
$data = array(
    array('Task', 'Hours per Day'),
    array('Work', 11),
    array('Eat', 2),
    array('Sleep', 7),
    array('Exercise', 4)
);

// 생성하다 HTML 암호
$htmlCode = "
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(" . json_encode($data) . ");

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
<div id='donutchart' style='width: 900px; height: 500px;'></div>
";

// 출력 차트 echo $ htmlcode;
?>

Google 차트를 사용하면 다양한 데이터 분석 및 프리젠 테이션 시나리오를 위해 대화식 차트를 쉽게 구축 할 수 있습니다.

요약

PHP는 프론트 엔드 차트 라이브러리와 결합되어 데이터 시각화 기능을 크게 향상시킵니다. Chart.js를 통해 구현 된 막대 차트이든 Google 차트에서 만든 원형 차트이든, 개발자는 유연한 데이터 구성 및 스크립트 출력을 통해 웹 사이트에 직관적 인 데이터 표현식을 추가 할 수 있습니다. 개발 과정에서 최상의 시각 효과와 대화식 경험을 달성하기 위해 특정 요구에 따라 적절한 차트 도구를 선택할 수 있습니다.