PHP 인터페이스와 ECharts를 사용하여 동적으로 업데이트되는 실시간 통계 차트를 생성하는 방법-PHP 튜토리얼-php.cn

PHP 인터페이스와 ECharts를 사용하여 동적으로 업데이트되는 실시간 통계 차트를 생성하는 방법

王林

풀어 주다： 2023-12-17 08:52:01

원래의

1117명이 탐색했습니다.

PHP 인터페이스와 ECharts를 사용하여 동적으로 업데이트되는 실시간 통계 차트를 생성하는 방법

PHP 인터페이스와 ECharts를 사용하여 동적으로 업데이트되는 실시간 통계 차트를 생성하는 방법에는 특정 코드 예제가 필요합니다.

지속적인 기술 개발로 데이터 분석 및 시각화는 현대 기업의 필수 도구 중 하나가 되었습니다. 그리고 기관. 널리 사용되는 JavaScript 데이터 시각화 라이브러리인 ECharts는 데이터 시각화를 위해 선호되는 도구 중 하나가 되었습니다. PHP 인터페이스와 ECharts를 결합하면 보다 유연하고 동적인 데이터 시각화 효과를 얻을 수 있습니다.

이 글에서는 PHP 인터페이스와 ECharts를 사용하여 동적으로 업데이트되는 실시간 통계 차트를 생성하는 방법을 소개하고, 독자가 관련 기술 및 구현 방법을 이해할 수 있도록 구체적인 코드 예제를 제공합니다.

1. 준비

시작하기 전에 다음 기술과 도구를 이해해야 합니다.

PHP: 일반적으로 사용되는 서버 측 프로그래밍 언어인 PHP는 데이터를 읽고 처리하는 데 도움이 될 수 있습니다.
MySQL: 일반적으로 사용되는 관계형 데이터베이스인 MySQL은 데이터를 저장하고 관리하는 데 도움을 줄 수 있습니다.
ECharts: 널리 사용되는 JavaScript 데이터 시각화 라이브러리인 ECharts는 차트를 생성하고 표시하는 데 도움이 될 수 있습니다.
Apache 서버: 일반적인 웹 서버 소프트웨어인 Apache는 PHP 환경을 구축하고 코드를 실행하는 데 도움을 줄 수 있습니다.

위의 도구와 기술을 준비한 후 구체적인 구현을 시작할 수 있습니다.

2. 구현 프로세스

다음으로 PHP 인터페이스와 ECharts를 사용하여 동적으로 업데이트되는 실시간 통계 차트를 생성하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

데이터베이스 생성

먼저 데이터베이스를 생성하고 데이터를 저장할 테이블을 생성해야 합니다. 여기서는 "stats"라는 데이터베이스와 "data"라는 테이블을 만들어 데이터를 저장합니다.

테이블 구조는 다음과 같습니다.

CREATE TABLE `data` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `value` int(11) NOT NULL,
   `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

로그인 후 복사

php 인터페이스 작성

다음으로 프런트 엔드에 데이터를 제공하기 위한 PHP 인터페이스를 작성해야 합니다. 이 예에서는 "get_data.php"라는 인터페이스를 작성하여 마지막 10개의 데이터를 가져와 JSON 형식으로 프런트 엔드에 반환합니다.

<?php

// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
   die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}

// 获取数据
$data = array();
$query = "SELECT * FROM data ORDER BY time DESC LIMIT 10";
$result = $mysqli->query($query);
if ($result->num_rows > 0) {
   while ($row = $result->fetch_assoc()) {
       $data[] = $row;
   }
}

// 返回JSON数据
header('Content-Type: application/json');
echo json_encode($data);

// 关闭数据库连接
$mysqli->close();

?>

로그인 후 복사

프런트 엔드 페이지 작성

다음으로 데이터를 표시하고 차트를 생성하기 위한 프런트 엔드 페이지를 작성해야 합니다. 이 예에서는 "index.html"이라는 페이지를 작성하여 마지막 10개의 데이터를 표시하고 실시간으로 업데이트되는 꺾은선형 차트를 생성합니다.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts实时统计图</title>
   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
   <div id="chart" style="width: 800px; height: 400px;"></div>
   <script>
       // 初始化图表
       var chart = echarts.init(document.getElementById('chart'));

       // 设置图表配置项
       var option = {
           title: {
               text: '实时统计图'
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                   animation: false
               }
           },
           legend: {
                data:['实时数据']
           },
           xAxis: {
               type: 'time',
               splitLine: {
                   show: false
               }
           },
           yAxis: {
               type: 'value',
               splitLine: {
                   show: false
               }
           },
           series: [{
               name: '实时数据',
               type: 'line',
               showSymbol: false,
               hoverAnimation: false,
               data: []
           }]
       };
       chart.setOption(option);

       // 定时更新图表数据
       setInterval(function() {
           $.getJSON('get_data.php', function(data) {
               option.series[0].data = data.reverse();
               chart.setOption(option);
           });
       }, 1000);
   </script>
</body>
</html>

로그인 후 복사

이 예에서는 ECharts JavaScript 라이브러리를 사용하고 "chart"라는 div를 정의하여 꺾은선형 차트를 표시합니다. 또한 1초마다 차트 데이터를 업데이트하는 타이머를 정의합니다.

테스트 데이터 삽입

마지막으로 전체 시스템이 제대로 작동하는지 테스트하기 위해 일부 테스트 데이터를 데이터베이스에 삽입해야 합니다. 이 예에서는 무작위로 생성된 100개의 데이터를 "data" 테이블에 삽입합니다.

다음 코드를 사용하여 일괄적으로 데이터를 삽입할 수 있습니다:

<?php

// 连接数据库
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'stats';
$mysqli = new mysqli($host, $user, $password, $database);
if ($mysqli->connect_error) {
   die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}

// 插入测试数据
for ($i = 1; $i <= 100; $i++) {
   $value = rand(1, 100);
   $time = date('Y-m-d H:i:s', strtotime('-' . $i . ' seconds'));
   $query = "INSERT INTO data (value, time) VALUES ('$value', '$time')";
   $result = $mysqli->query($query);
}

// 关闭数据库连接
$mysqli->close();

?>

로그인 후 복사

3. 요약

위의 구현 프로세스를 통해 PHP 인터페이스와 ECharts를 사용하여 동적으로 업데이트되는 실시간 통계 차트를 생성할 수 있습니다. 실제 적용에서는 다양한 데이터 시각화 요구 사항을 충족하기 위해 특정 요구 사항에 따라 이를 조정하고 수정할 수 있습니다.

대체로 PHP 인터페이스와 ECharts의 조합은 보다 유연하고 동적인 데이터 시각화를 달성하는 데 도움이 되며 데이터 분석 및 의사 결정을 위한 신뢰할 수 있는 도구와 지원을 제공합니다.

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