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

PHP 및 FusionCharts를 사용하여 데이터 시각화 차트 만들기

PHPz

풀어 주다： 2023-05-11 11:42:01

원래의

913명이 탐색했습니다.

현대 비즈니스가 점점 디지털화되면서 데이터 처리 및 시각화가 점점 더 중요해지고 있습니다. 많은 기업이 비즈니스를 이해하고 전략적 결정을 내리기 위해 데이터 시각화에 의존합니다. 이 기사에서는 PHP와 FusionCharts를 사용하여 데이터 시각화 차트를 만드는 방법에 대해 설명합니다.

FusionCharts는 아름답고 동적인 대화형 차트를 만들기 위한 JavaScript 라이브러리 세트입니다. 선형 차트, 원형 차트, 막대 차트, 분산형 차트 등 다양한 유형의 차트를 지원합니다. FusionCharts는 사용자가 데이터를 더 잘 이해할 수 있도록 동적 업데이트, 실시간 반응 등 다양한 기능을 제공합니다.

이 기사의 예에서는 A, B, C, D 회사의 판매 데이터를 표시하는 간단한 막대 차트를 만들어 보겠습니다. PHP를 사용하여 차트 데이터를 생성한 다음 FusionCharts를 사용하여 이를 시각화하겠습니다.

시작하기 전에 PHP 및 FusionCharts 라이브러리를 설치하고 데이터를 준비해야 합니다. 데이터를 생성하기 위해 data.php라는 PHP 파일을 만들 수 있습니다. 이 파일에서는 판매 데이터를 저장할 배열을 만듭니다.

<?php
$sales = array(
    array("name" => "Company A", "sales" => 25000),
    array("name" => "Company B", "sales" => 35000),
    array("name" => "Company C", "sales" => 45000),
    array("name" => "Company D", "sales" => 55000)
);
echo json_encode($sales);
?>

로그인 후 복사

이 예에서는 각각 회사와 매출을 나타내는 4개의 배열이 포함된 $sales라는 배열을 만듭니다. json_encode() 함수를 사용하여 데이터를 JavaScript에서 사용할 수 있도록 JSON 형식으로 변환합니다.

다음으로 차트를 표시할 HTML 페이지를 준비해야 합니다. index.html이라는 파일을 만들고 그 안에 FusionCharts 라이브러리와 JavaScript 코드를 포함할 수 있습니다. 또한 차트를 그릴 수 있도록 이 페이지 내에 빈 div 요소를 만들어야 합니다.

<!DOCTYPE html>
<html>

<head>
  <title>FusionCharts Example</title>
  <script src="fusioncharts.js"></script>
</head>

<body>
  <div id="chart-container"></div>

  <script>
    FusionCharts.ready(function() {
      var salesChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '100%',
        height: '500',
        dataFormat: 'json',
        dataSource: {
          "chart": {
            "caption": "Sales Data",
            "xAxisName": "Company",
            "yAxisName": "Sales",
            "theme": "fusion"
          },
          "data": []
        }
      });

      var dataSource = {
        "chart": {},
        "data": []
      };

      // AJAX request to get the data from data.php
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          dataSource.data = JSON.parse(this.responseText);

          salesChart.setChartData(dataSource);
        }
      };
      xhttp.open("GET", "data.php", true);
      xhttp.send();
    });
  </script>
</body>

</html>

로그인 후 복사

이 예에서는 salesChart라는 FusionCharts 개체를 만들고 차트 유형을 column2d(열 차트)로 설정합니다. 또한 차트의 너비, 높이, x 및 y축 이름, 테마를 설정합니다. 또한 data.php에서 얻은 판매 데이터가 포함된 dataSource라는 JavaScript 개체를 만들었습니다.

JavaScript 코드에서는 XMLHttpRequest 개체를 사용하여 data.php에서 데이터를 가져오기 위한 HTTP GET 요청을 만듭니다. 데이터가 있으면 dataSource 객체의 data 속성에 데이터를 설정하고 setChartData() 메서드를 사용하여 데이터를 차트에 적용합니다.

이제 index.html 파일을 브라우저에서 열면 A, B, C, D 기업의 매출 데이터를 보여주는 멋진 막대 차트가 표시됩니다.

요약하자면, PHP와 FusionCharts 라이브러리를 사용하여 데이터 시각화 차트를 만드는 방법을 배웠습니다. 이러한 도구를 사용하여 아름다운 대화형 차트를 만드는 방법을 알아내면 데이터를 더 잘 이해하고 더 나은 결정을 내릴 수 있습니다.

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