PHP 인터페이스와 ECharts를 통해 통계 차트 데이터를 동적으로 로드하는 방법-PHP 튜토리얼-php.cn

PHP 인터페이스와 ECharts를 통해 통계 차트 데이터를 동적으로 로드하는 방법

WBOY

풀어 주다： 2023-12-17 14:28:01

원래의

1093명이 탐색했습니다.

PHP 인터페이스와 ECharts를 통해 통계 차트 데이터를 동적으로 로드하는 방법

[소개]
기업과 개발자가 데이터 시각화를 중요하게 여기면서 통계 차트의 적용이 점점 더 널리 보급되고 있습니다. 오픈 소스 JavaScript 차트 라이브러리인 ECharts는 PHP 인터페이스와 결합하여 다양한 차트 유형과 대화형 방법을 제공하여 통계 차트 데이터를 동적으로 로드할 수 있습니다. 이 기사에서는 PHP 인터페이스와 ECharts를 사용하여 통계 차트 데이터를 동적으로 로드하는 방법에 대한 구체적인 단계를 소개하고 참조용 샘플 코드를 제공합니다.

【순서】

데이터 준비

먼저 표시할 데이터를 준비해야 합니다. MySQL, API 등을 통해 데이터를 얻을 수 있으며, 필요한 JSON 형식으로 데이터를 포맷할 수 있습니다. 히스토그램을 예로 들면 데이터 형식은 다음과 같습니다.

[
  {
    "name": "数据1",
    "value": 100
  },
  {
    "name": "数据2",
    "value": 200
  },
  {
    "name": "数据3",
    "value": 300
  }
]

로그인 후 복사

PHP 인터페이스 만들기

다음으로 데이터를 얻기 위한 PHP 인터페이스를 만들어야 합니다. 샘플 코드는 다음과 같습니다.

<?php

header('Content-Type: application/json');

// 从数据库或API获取数据
$data = [
  ["name" => "数据1", "value" => 100],
  ["name" => "数据2", "value" => 200],
  ["name" => "数据3", "value" => 300]
];

echo json_encode($data);

로그인 후 복사

위 코드를 통해 필요한 JSON 형식의 데이터를 프런트 엔드에 반환할 수 있습니다.

HTML 파일 만들기

다음으로 HTML 파일을 만들고 ECharts 및 jQuery 라이브러리를 가져옵니다. 샘플 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>统计图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    $(function() {
      // 使用jQuery的ajax方法调用PHP接口获取数据
      $.ajax({
        url: 'api.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 获取数据成功后，调用ECharts绘制图表
          var chart = echarts.init(document.getElementById('chart'));
          var option = {
            title: {
              text: '统计图'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: data.map(function(item) {
                return item.name;
              })
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.map(function(item) {
                return item.value;
              }),
              type: 'bar'
            }]
          };
          chart.setOption(option);
        }
      });
    });
  </script>
</body>
</html>

로그인 후 복사

위 코드를 통해 ajax 메소드를 사용하여 PHP 인터페이스를 호출하여 데이터를 얻고, ECharts를 사용하여 히스토그램을 그립니다.

【요약】
위 단계를 통해 PHP 인터페이스와 ECharts를 사용하여 통계 차트 데이터를 동적으로 로드할 수 있습니다. 먼저 표시할 데이터를 JSON 형식으로 준비하고 포맷해야 합니다. 그런 다음 데이터를 가져오고 데이터를 JSON 형식으로 프런트 엔드에 반환하는 PHP 인터페이스를 만듭니다. 마지막으로 프런트 엔드는 ajax를 통해 PHP 인터페이스를 호출하여 데이터를 얻고 ECharts를 사용하여 해당 차트를 그립니다.

【참조 코드】
PHP 인터페이스 코드:

<?php

header('Content-Type: application/json');

// 从数据库或API获取数据
$data = [
  ["name" => "数据1", "value" => 100],
  ["name" => "数据2", "value" => 200],
  ["name" => "数据3", "value" => 300]
];

echo json_encode($data);

로그인 후 복사

HTML 파일 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>统计图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    $(function() {
      // 使用jQuery的ajax方法调用PHP接口获取数据
      $.ajax({
        url: 'api.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 获取数据成功后，调用ECharts绘制图表
          var chart = echarts.init(document.getElementById('chart'));
          var option = {
            title: {
              text: '统计图'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: data.map(function(item) {
                return item.name;
              })
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.map(function(item) {
                return item.value;
              }),
              type: 'bar'
            }]
          };
          chart.setOption(option);
        }
      });
    });
  </script>
</body>
</html>

로그인 후 복사

위 내용은 PHP 인터페이스와 ECharts를 통해 통계 차트 데이터를 동적으로 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!