Integration von PHP und Highcharts zur Realisierung der Diagrammvisualisierungsanzeige

Mit dem Aufkommen des Datenzeitalters ist die Datenvisualisierung in den Fokus vieler Unternehmen und Entwickler gerückt. Für viele Entwickler ist die Implementierung der Datenvisualisierung keine leichte Aufgabe. Mit der Integration von PHP und Highcharts wird die Visualisierung von Diagrammen jedoch zum Kinderspiel.

PHP ist eine beliebte Programmiersprache, die im Bereich der Webentwicklung weit verbreitet ist. Highcharts ist eine in JavaScript geschriebene Diagrammbibliothek, mit der problemlos verschiedene Diagrammtypen erstellt werden können, z. B. Säulendiagramme, Liniendiagramme, Kreisdiagramme usw.

Als nächstes stellen wir vor, wie man PHP und Highcharts integriert und Diagrammvisualisierungen realisiert.

Schritt 1: Highcharts herunterladen

Zuerst müssen Sie die Highcharts-Bibliothek herunterladen. Auf der offiziellen Website werden zwei Versionen bereitgestellt, eine ist die Open-Source-Version und die andere ist die kommerziell autorisierte Version. Wenn Sie eine kommerziell lizenzierte Version benötigen, erwerben Sie bitte die entsprechende Lizenz.

Sobald der Download abgeschlossen ist, entpacken Sie Highcharts in einen Ordner auf Ihrem Webserver und stellen Sie sicher, dass Ihr Ordner über die entsprechenden Berechtigungen verfügt.

Schritt 2: Bereiten Sie Ihre Daten vor

Bevor Sie mit der Erstellung von Diagrammen beginnen, müssen Sie Ihre Daten vorbereiten. Daten können aus beliebigen Datenquellen stammen, z. B. Datenbanken, CSV-Dateien usw.

Für die Beispiele in diesem Artikel verwenden wir ein PHP-Array als Datenquelle. Hier ist das Array, das wir verwenden werden:

$data = array(

array('name' => 'Firefox', 'y' => 45.0),
array('name' => 'IE', 'y' => 26.8),
array('name' => 'Chrome', 'y' => 12.8),
array('name' => 'Safari', 'y' => 8.5),
array('name' => 'Opera', 'y' => 6.2),
array('name' => 'Others', 'y' => 0.7)

);

Schritt 3: Erstellen Sie eine HTML-Seite

Jetzt erstellen wir eine HTML-Seite und integrieren die zum Erstellen von Diagrammen erforderlichen Highcharts-Bibliotheksdateien JavaScript-Code. Hier ist der HTML-Code für das Beispiel:

aba7b36f87decd50b18c7e3e3c150106
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>Highcharts Integration with PHP</title>
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<div id="container" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
    var data = <?php echo json_encode($data); ?>;
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market share, January, 2018 to May, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: data
        }]
    });
</script>

36cc49f0c466276486e50c850b7e4956
< ;/ html>

In diesem Beispiel weisen wir die Daten einer JavaScript-Variablen zu und verwenden dann die Funktion Highcharts.chart(), um ein Diagramm zu erstellen.

Im obigen Code definieren wir außerdem mehrere zusätzliche Parameter, wie z. B. Titel, Farbe, Mouseover-Eingabeaufforderung usw.

Spezifische Parameter können je nach Bedarf geändert werden.

Schritt vier: Führen Sie den Code aus

Jetzt sind wir bereit, PHP und Highcharts zu integrieren, um Diagramme zur Anzeige Ihrer Daten zu erstellen. Speichern Sie den HTML-Code als .php-Datei und laden Sie die Datei auf den Server hoch.

Jetzt können Sie die Datei in Ihrem Browser öffnen und Ihre Daten als Diagramm dargestellt sehen!

Zusammenfassung

Mit der Integration von PHP und Highcharts können Sie Daten einfach visualisieren, ohne über Kenntnisse in der JavaScript-Entwicklung zu verfügen. Der Einstieg in diese Integration ist einfach und dennoch flexibel genug, um Ihnen die Erstellung einer Vielzahl von Diagrammtypen zu ermöglichen.

In tatsächlichen Anwendungen können Sie Daten aus einer beliebigen Datenquelle abrufen und in Form von Diagrammen anzeigen, um die Daten besser zu verstehen und zu analysieren.

Das obige ist der detaillierte Inhalt vonIntegration von PHP und Highcharts zur Realisierung der Diagrammvisualisierungsanzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!