Ausführliche Erklärung zum Erstellen dynamischer Diagramme in PHP basierend auf CanvasJS

<img src="https://img.php.cn/upload/article/202008/04/2020080415471934199.jpg" alt="Ausführliche Erklärung zum Erstellen dynamischer Diagramme in PHP basierend auf CanvasJS" >

CanvasJS ist eine JavaScript-Bibliothek zum einfachen Erstellen anderer Diagrammtypen für Webseiten. Zum Beispiel Balkendiagramm, Kreisdiagramm, Säulendiagramm, Flächendiagramm, Liniendiagramm usw.

Nehmen wir das Beispiel, dass wir ein Diagramm erstellen müssen, in dem wir die jeden Monat verkauften und gekauften Produkte anzeigen können. Wir betrachten zwei Arrays, wir können sie auch aus der Datenbank betrachten. Sobald wir die Daten aus der Datenbank erhalten und in einem Array speichern, können sie mit CanvasJS problemlos mit dynamischen Grafiken gezeichnet werden.

Erstellen Sie eine Datei und speichern Sie sie im Projektordner. Der Dateiname chart_sample.php enthält Daten in Form von Arrays, wobei das erste Array die gekauften Produkte und das zweite Array die Sols-Produktliste darstellt. Verwenden Sie nun canvasJS, um die Grafiken zu zeichnen.

Zum Beispiel:

<?php 
// First array for purchased product 
$purchased= array(10, 15, 19, 0, 5, 7, 0, 0, 12, 13, 10, 1);

// Second array for sold product 
$sold= array(7, 12, 14, 0, 3, 7, 0, 0, 10, 7, 5, 0);

// Data to draw graph for purchased products 
$dataPoints = array( 
  array("label"=> "Jan", "y"=> $purchased[0]), 
  array("label"=> "Feb", "y"=> $purchased[1]), 
  array("label"=> "March", "y"=> $purchased[2]), 
  array("label"=> "April", "y"=> $purchased[3]), 
  array("label"=> "May", "y"=> $purchased[4]), 
  array("label"=> "Jun", "y"=> $purchased[5]), 
  array("label"=> "July", "y"=> $purchased[6]), 
  array("label"=> "Aug", "y"=> $purchased[7]), 
  array("label"=> "Sep", "y"=> $purchased[8]), 
  array("label"=> "Oct", "y"=> $purchased[9]), 
  array("label"=> "Nov", "y"=> $purchased[10]), 
  array("label"=> "Dec", "y"=> $purchased[11]) 
);

// Data to draw graph for sold products 
$dataPoints2 = array( 
  array("label"=> "Jan", "y"=> $sold[0]), 
  array("label"=> "Feb", "y"=> $sold[1]), 
  array("label"=> "March", "y"=> $sold[2]), 
  array("label"=> "April", "y"=> $sold[3]), 
  array("label"=> "May", "y"=> $sold[4]), 
  array("label"=> "Jun", "y"=> $sold[5]), 
  array("label"=> "July", "y"=> $sold[6]), 
  array("label"=> "Aug", "y"=> $sold[7]), 
  array("label"=> "Sep", "y"=> $sold[8]), 
  array("label"=> "Oct", "y"=> $sold[9]), 
  array("label"=> "Nov", "y"=> $sold[10]), 
  array("label"=> "Dec", "y"=> $sold[11]) 
);

?>

rrree

Verwandte Lernempfehlungen: PHP-Programmierung vom Einstieg bis zum Master

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Erstellen dynamischer Diagramme in PHP basierend auf CanvasJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!