Erstellen von Diagrammen mit JavaScript und PHP

Das webbasierte Diagramm kann erstellt werden, indem eine clientseitige Bibliothek oder eine serverseitige Bibliothek basierend auf statischen oder dynamischen Daten verwendet wird. Wenn Sie animierte Diagramme erstellen möchten und das Diagramm schneller herunterladen möchten, können Sie eine Client-Side-Diagrammbibliothek besser verwenden. Viele clientseitige Bibliotheken sind verfügbar, um Diagramme für Webseiten zu erstellen. Eine der beliebten kundenseitigen Bibliotheken ist Leinwand Dies kann zum Erstellen von webbasierten Diagrammen verwendet werden, indem feste Daten verwendet oder Daten aus einer beliebigen Datenbank abgerufen werden.

Canvasjs wird in diesem Tutorial zum Erstellen von webbasierten Diagrammen mit PHP verwendet. Diese Bibliothek unterstützt verschiedene Arten von Diagrammen, z. B. Balkendiagramm, Spaltendiagramm, dynamisches Spaltendiagramm, Zeilendiagramm, Kreisdiagramm, Pyramid -Diagramm, Donut -Diagramm, Bubble -Diagramm usw. Einige von ihnen werden hier unter Verwendung von Beispieldaten angezeigt. Vor Beginn dieses Tutorials müssen Sie sicherstellen, dass Ihr Webserver und Ihr PHP ordnungsgemäß installiert sind und funktionieren.

Laden Sie Leinwand herunter

Es ist in der kostenlosen und kommerziellen Version erhältlich. Sie können die kostenlose Version dieser Bibliothek für Testzwecke herunterladen und verwenden. Gehen Sie zur folgenden URL und klicken Sie auf Herunterladen Link zum Herunterladen der Canvasjs -Bibliothek. Entpacken Sie die Datei und speichern Sie den Ordner nach dem Download auf dem Webserver, um sie zu verwenden.

https: // canvasjs.com

$ ProfitData = Array (Array (
Array ("x" => 2013, "y" => 440000),
Array ("x" => 2014, "y" => 270000),
Array ("x" => 2015, "y" => 210000, "IndexLabel" => "Niedrigste"),
Array ("x" => 2016, "y" => 600000),
Array ("x" => 2017, "y" => 630000, "IndexLabel" => "höchste"),
Array ("x" => 2018, "y" => 560000));
?>

Beispiel für das Spaltendiagramm

Ausgang:

Die folgende Ausgabe wird generiert, wenn Sie die Datei von einem beliebigen Webserver ausführen. "Testversion" und "Canvasjs".com ”Wasserzeichen werden für die kostenlose Version angezeigt.

Wenn Sie auf “klicken“Mehr Optionen" Taste von der oberen rechten Ecke, dann werden drei Optionen angezeigt. Sie können das Diagramm drucken oder das Diagramm als JPG- oder PNG -Bildformat speichern. Wenn Sie auf “klicken“Speichern Sie als PNGOption ”, dann wird das folgende Dialogfeld angezeigt.

Der Standard -Bilddateiname lautet Diagramm.png. Sie können die Wasserzeichen aus dem Bild entfernen, indem Sie eine beliebige Fotobearbeitungssoftware problemlos verwenden.

Kuchendiagramm:

Das folgende Beispiel zeigt die Popularität verschiedener Linux -Verteilungen mithilfe von Kreisdiagramm. Schreiben Sie den folgenden Code in eine Datei mit dem Namen Kuchendiagramm.Php und speichern Sie die Datei in vAR/www/html/jSchart Ordner.

$ Popularität = Array (
Array ("OS" => "Arch Linux", "y" => 40),
Array ("os" => "Centos", "y" => 25),
Array ("OS" => "Debian", "y" => 12),
Array ("OS" => "Fedora", "y" => 10),
Array ("OS" => "Gentoo", "y" => 8),
Array ("OS" => "Lindows", "y" => 5)
);
?>

Kreisdiagrammbeispiel

Ausgang:

Die folgende Ausgabe wird angezeigt, wenn Sie die Datei vom Webserver ausführen. Sie können eine Bilddatei des Diagramms nach dem Schritt erstellen, der im vorherigen Beispiel angezeigt wird.

Dynamisches Spaltendiagramm:

Sie können mit dieser Bibliothek gut aussehendes dynamisches Diagramm erstellen. Nehmen wir an, Sie möchten ein Live -Aktienmarktdiagramm erstellen, in dem der Aktienkurs kontinuierlich steigt oder sinkt. Schreiben Sie den folgenden Code in eine Datei mit dem Namen Dynamik-Chart.Php und speichern Sie die Datei in vAR/www/html/jSchart Ordner.

$ StockData = Array (Array (
Array ("stock" => "msft", "y" => 92.67),
Array ("stock" => "niedrig", "y" => 88.89),
Array ("stock" => "intc", "y" => 52.15),
Array ("stock" => "adi", "y" => 91.78),
Array ("stock" => "adbe", "y" => 224.80),
Array ("stock" => "abbv", "y" => 94.30),
Array ("stock" => "amd", "y" => 10.27)
);
?>

Beispiel für dynamisches Diagramm

Ausgang:
Die folgende Ausgabe wird angezeigt, wenn Sie die Datei vom Webserver ausführen. Sie können eine Bilddatei des Diagramms auf ähnliche Weise erstellen, die im ersten Beispiel angezeigt wird.

Durch die folgenden Schritte können Sie die erforderlichen webbasierten animierten Diagramme mit dieser nützlichen JavaScript -Bibliothek problemlos erstellen.