Erstellen Sie Echtzeit-Datenvisualisierungsdiagramme mit PHP und Highcharts

Mit der kontinuierlichen Weiterentwicklung der Internet-Technologie sind Datenanalyse und -visualisierung zu einem unverzichtbaren Bestandteil von Unternehmens- und Privatanwendungen geworden. Unter ihnen zeigt die Echtzeit-Datenvisualisierung ihre beispiellose Bedeutung. Es ermöglicht Benutzern, Datenänderungen in Echtzeit zu sehen und schnell Entscheidungen zu treffen, um den besten Nutzen zu erzielen.

Um Datenvisualisierungstabellen in Echtzeit präsentieren zu können, benötigen wir ein Tool, das dynamisch zeichnen kann. Highcharts ist ein sehr empfehlenswertes Tool dieser Art. Gleichzeitig ist PHP eine sehr beliebte und leicht zu erlernende Web-Programmiersprache. Daher können wir PHP und Highcharts zusammen verwenden, um ein Echtzeit-Datenvisualisierungsdiagramm zu erstellen.

Zuerst müssen wir die Daten vorbereiten. Bei der Echtzeit-Datenvisualisierung treten Datenänderungen jederzeit auf. Daher verwenden wir hier eine simulierte Datenmethode. Wir können ein PHP-Skript schreiben, um mithilfe eines Zufallszahlengenerators kontinuierlich Daten zu generieren. Das Folgende ist der Code zum Simulieren von Daten:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendMsg($id, $msg) {
  echo "id: $id
";
  echo "data: $msg
";
  echo "
";
  ob_flush();
  flush();
}

$i = 0;
while(true) {
    $data = rand(0, 100);
    sendMsg($i++, $data);
    sleep(1);
}
?>

Im obigen Code teilen wir dem Browser zunächst mit, dass es sich um einen Ereignisstrom handelt, indem wir den Inhaltstyp auf Text/Ereignisstrom setzen. Dann senden wir vor jedem Senden von Daten eine ID, die die ID der diesmal gesendeten Daten darstellt, um den Datenaustausch zwischen dem Browser und dem Server zu erleichtern. Abschließend werden die Daten über die sendMsg-Funktion gesendet, sodass kontinuierlich Daten generiert und an den Browser gesendet werden können.

Als nächstes benötigen wir eine Möglichkeit, diese Daten in Echtzeit abzurufen und zu analysieren. Hier haben wir eine JavaScript-Bibliothek ausgewählt: EventSource. Es handelt sich um eine neue API in H5, die hauptsächlich zum Aufbau eines Servers zum Übertragen von Ereignisströmen an den Browser verwendet wird. Das Folgende ist der Code für die Verwendung von EventSource:

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 在这里进行数据处理
  };
});

Im obigen Code erstellen wir zunächst ein EventSource-Objekt und geben die URL des Servers an, mit dem es eine Verbindung herstellen möchte. Legen Sie dann die Onmessage-Ereignisantwortfunktion fest. Wenn der Server Daten sendet, wird diese Funktion ausgelöst und die Daten werden als Parameter übergeben. Dann können wir die Datenverarbeitung in der Onmessage-Funktion durchführen, beispielsweise die Anzeige der Daten.

Schließlich müssen wir Highcharts verwenden, um die Daten in Diagrammen zu visualisieren. Highcharts ist eine JavaScript-Bibliothek zum Zeichnen von Diagrammen, mit der verschiedene Arten von Diagrammen generiert werden können, z. B. lineare Diagramme, Balkendiagramme, Kreisdiagramme usw. Hier ist der Code zur Visualisierung der Daten in einem Liniendiagramm:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: '实时数据可视化'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: '数据'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  series: [{
    name: '数据',
    data: []
  }]
});

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 把数据转化成坐标
    var point = [new Date().getTime(), parseInt(data)];

    // 把坐标添加到图表中
    var series = chart.series[0];
    var shift = series.data.length > 20; // 确保图表上只有20个点
    series.addPoint(point, true, shift);
  };
});

Im obigen Code erstellen wir zunächst ein erweitertes Diagrammobjekt und fügen einige Grundeinstellungen wie Titel, Achse und Datenreihen hinzu. Dann haben wir im Document Ready-Ereignis auch ein EventSource-Objekt erstellt und die Onmessage-Ereignisantwortfunktion eingerichtet, um die vom Server gesendeten Daten zu verarbeiten. Wir wandeln die Daten in Koordinaten um und fügen die Koordinaten wieder dem Liniendiagramm hinzu.

Auf diese Weise können wir PHP und Highcharts verwenden, um Echtzeit-Datenvisualisierungsdiagramme zu erstellen. Wir verwenden PHP, um Zufallsdaten zu generieren und diese Daten in Echtzeit an den Browser zu senden. Verwenden Sie dann das EventSource-Objekt in JavaScript, um auf diese Daten zu reagieren, und visualisieren Sie die Daten über Highcharts in einem Liniendiagramm. Auf diese Weise können wir Benutzern ermöglichen, Datenänderungen in Echtzeit zu sehen und so die Effizienz der vom Benutzer analysierbaren Daten verbessern.

Das obige ist der detaillierte Inhalt vonErstellen Sie Echtzeit-Datenvisualisierungsdiagramme mit PHP und Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!