Heim > Artikel > Backend-Entwicklung > So verwenden Sie die PHP-Schnittstelle und ECharts, um dynamisch aktualisierte Echtzeit-Statistikdiagramme zu erstellen

So verwenden Sie die PHP-Schnittstelle und ECharts, um dynamisch aktualisierte Echtzeit-Statistikdiagramme zu erstellen

王林Original: 2023-12-17 08:50:381035Durchsuche

Um die PHP-Schnittstelle und ECharts zu verwenden, um dynamisch aktualisierte Echtzeit-Statistikdiagramme zu erstellen, sind spezifische Codebeispiele erforderlich.

Mit der kontinuierlichen Weiterentwicklung der Technologie sind Datenanalyse und -visualisierung zu einem der wesentlichen Werkzeuge für moderne Unternehmen geworden und Institutionen. Als beliebte JavaScript-Datenvisualisierungsbibliothek hat sich ECharts zu einem der bevorzugten Tools für die Datenvisualisierung entwickelt. Durch die Kombination der PHP-Schnittstelle mit ECharts können Sie flexiblere und dynamischere Datenvisualisierungseffekte erzielen.

In diesem Artikel wird erläutert, wie Sie mit der PHP-Schnittstelle und ECharts dynamisch aktualisierte Echtzeit-Statistikdiagramme erstellen und spezifische Codebeispiele bereitstellen, um den Lesern das Verständnis verwandter Technologien und Implementierungsmethoden zu erleichtern.

1. Vorbereitung

Bevor wir beginnen, müssen wir die folgenden Technologien und Tools verstehen:

PHP: Als häufig verwendete serverseitige Programmiersprache kann PHP uns beim Lesen und Verarbeiten von Daten helfen.
MySQL: Als häufig verwendete relationale Datenbank kann MySQL uns beim Speichern und Verwalten von Daten helfen.
ECharts: Als beliebte JavaScript-Datenvisualisierungsbibliothek kann ECharts uns bei der Erstellung und Anzeige von Diagrammen helfen.
Apache-Server: Als gängige Webserver-Software kann Apache uns beim Aufbau einer PHP-Umgebung und beim Ausführen von Code helfen.

Nachdem wir die oben genannten Tools und Technologien vorbereitet haben, können wir mit der konkreten Implementierung beginnen.

2. Implementierungsprozess

Als nächstes stellen wir vor, wie man mit der PHP-Schnittstelle und ECharts dynamisch aktualisierte Echtzeit-Statistikdiagramme generiert, und stellen spezifische Codebeispiele bereit.

Datenbank erstellen

Zuerst müssen wir eine Datenbank und eine Tabelle zum Speichern von Daten erstellen. Hier erstellen wir eine Datenbank namens „stats“ und darin eine Tabelle namens „data“, um Daten zu speichern.

Die Tabellenstruktur ist wie folgt:

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;

Schreiben Sie eine PHP-Schnittstelle

Als nächstes müssen wir eine PHP-Schnittstelle schreiben, um dem Frontend Daten bereitzustellen. In diesem Beispiel schreiben wir eine Schnittstelle mit dem Namen „get_data.php“, um die letzten 10 Datenelemente abzurufen und sie im JSON-Format an das Frontend zurückzugeben.

<?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();

?>

Schreiben der Front-End-Seite

Als nächstes müssen wir eine Front-End-Seite schreiben, um Daten anzuzeigen und Diagramme zu erstellen. In diesem Beispiel schreiben wir eine Seite mit dem Namen „index.html“, um die letzten 10 Daten anzuzeigen und ein Liniendiagramm zu erstellen, das in Echtzeit aktualisiert wird.

<!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>

In diesem Beispiel verwenden wir die ECharts-JavaScript-Bibliothek und definieren ein Div namens „chart“, um das Liniendiagramm anzuzeigen. Wir definieren außerdem einen Timer, um die Diagrammdaten jede Sekunde zu aktualisieren.

Testdaten einfügen

Abschließend müssen wir einige Testdaten in die Datenbank einfügen, um zu testen, ob das gesamte System ordnungsgemäß funktioniert. In diesem Beispiel fügen wir 100 zufällig generierte Daten in die Tabelle „Daten“ ein.

Sie können den folgenden Code verwenden, um Daten stapelweise einzufügen:

<?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. Durch den oben genannten Implementierungsprozess können wir die PHP-Schnittstelle und ECharts verwenden, um dynamisch aktualisierte Echtzeit-Statistikdiagramme zu generieren. In praktischen Anwendungen können wir es entsprechend den spezifischen Anforderungen anpassen und modifizieren, um unterschiedliche Anforderungen an die Datenvisualisierung zu erfüllen.

Alles in allem kann uns die Kombination aus PHP-Schnittstelle und ECharts dabei helfen, eine flexiblere und dynamischere Datenvisualisierung zu erreichen und zuverlässige Tools und Unterstützung für die Datenanalyse und Entscheidungsfindung bereitzustellen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die PHP-Schnittstelle und ECharts, um dynamisch aktualisierte Echtzeit-Statistikdiagramme zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript mysql json echarts html 接口数据库 apache 数据分析

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：PHP und WebSocket: Ein optimierter Ansatz für Instant MessagingNächster Artikel：PHP und WebSocket: Ein optimierter Ansatz für Instant Messaging

In Verbindung stehende Artikel

Mehr sehen