Erstellen Sie Datenvisualisierungsdiagramme mit PHP und FusionCharts-PHP-Tutorial-php.cn

Erstellen Sie Datenvisualisierungsdiagramme mit PHP und FusionCharts

PHPz

Freigeben： 2023-05-11 11:42:01

Original

867 Leute haben es durchsucht

Da moderne Unternehmen immer digitaler werden, werden Datenverarbeitung und Visualisierung immer wichtiger. Viele Unternehmen verlassen sich auf Datenvisualisierung, um ihr Geschäft zu verstehen und strategische Entscheidungen zu treffen. In diesem Artikel besprechen wir, wie man Datenvisualisierungsdiagramme mit PHP und FusionCharts erstellt.

FusionCharts ist eine Reihe von JavaScript-Bibliotheken zum Erstellen schöner, dynamischer und interaktiver Diagramme. Es unterstützt viele Arten von Diagrammen, darunter lineare Diagramme, Kreisdiagramme, Balkendiagramme, Streudiagramme und mehr. FusionCharts bietet viele Funktionen wie dynamische Aktualisierungen und Echtzeitreaktionen, um Benutzern ein besseres Verständnis der Daten zu erleichtern.

Im Beispiel dieses Artikels erstellen wir ein einfaches Balkendiagramm, um die Verkaufsdaten der Unternehmen A, B, C und D anzuzeigen. Wir werden PHP verwenden, um Diagrammdaten zu generieren und diese dann mit FusionCharts zu visualisieren.

Bevor wir beginnen, müssen wir PHP- und FusionCharts-Bibliotheken installieren und unsere Daten vorbereiten. Wir können eine PHP-Datei namens data.php erstellen, um unsere Daten zu generieren. In dieser Datei erstellen wir ein Array zum Speichern von Verkaufsdaten.

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

Nach dem Login kopieren

In diesem Beispiel erstellen wir ein Array namens $sales, das 4 Arrays enthält, die jeweils ein Unternehmen und seine Verkäufe darstellen. Wir verwenden die Funktion json_encode(), um die Daten zur Verwendung in JavaScript in das JSON-Format zu konvertieren.

Als nächstes müssen wir eine HTML-Seite vorbereiten, um das Diagramm darzustellen. Wir können eine Datei namens index.html erstellen und die FusionCharts-Bibliothek und unseren JavaScript-Code darin einbinden. Außerdem müssen wir auf dieser Seite ein leeres div-Element erstellen, damit unser Diagramm darin gezeichnet werden kann.

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

Nach dem Login kopieren

In diesem Beispiel erstellen wir ein FusionCharts-Objekt namens salesChart und setzen den Diagrammtyp auf columns2d (Säulendiagramm). Wir legen außerdem die Breite, Höhe, die Namen der x- und y-Achse sowie das Thema des Diagramms fest. Wir haben außerdem ein JavaScript-Objekt namens dataSource erstellt, das die Verkaufsdaten enthält, die wir aus data.php erhalten haben.

In unserem JavaScript-Code verwenden wir das XMLHttpRequest-Objekt, um eine HTTP-GET-Anfrage zu stellen, um Daten aus data.php abzurufen. Sobald wir die Daten haben, setzen wir die Daten auf die Dateneigenschaft des dataSource-Objekts und verwenden die Methode setChartData(), um die Daten auf unser Diagramm anzuwenden.

Wenn wir nun die Datei index.html in einem Browser öffnen, sehen wir ein schönes Balkendiagramm mit den Verkaufsdaten der Unternehmen A, B, C und D.

Zusammenfassend haben wir gelernt, wie man Datenvisualisierungsdiagramme mit PHP und der FusionCharts-Bibliothek erstellt. Indem wir herausfinden, wie wir mit diesen Tools schöne interaktive Diagramme erstellen können, können wir unsere Daten besser verstehen und bessere Entscheidungen treffen.

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