Wie man Werte dynamisch in Script mit php übergibt, um ein Diagramm zu erzeugen

Question

Ich versuche ein Balkendiagramm für die Daten in MySQL mit PHP zu erstellen. Ich benutze Bootstrap-Vorlage, um eine Anwendung zu erstellen. Ich habe ein vordefiniertes Balkendiagramm mit statischen Daten. Ich möchte die Daten aus der Datenbank hinzufügen. Ich habe mein Bestes versucht, konnte aber keine Lösung finden, da ich Anfänger in Javascript bin. Bitte leiten Sie mich dazu, Daten dynamisch hinzuzufügen. Das Script ist unten:

// Bar chart 
 
     var ctx = document.getElementById("mybarChart"); 
 
     var mybarChart = new Chart(ctx, { 
 
     type: 'bar', 
 
     data: { 
 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
      datasets: [{ 
 
      label: '# of Votes', 
 
      backgroundColor: "#26B99A", 
 
      data: [10, 20, 30, 40, 20, 10, 40] 
 
      }, { 
 
      label: '# of Votes', 
 
      backgroundColor: "#03586A", 
 
      data: [41, 56, 25, 48, 72, 34, 12] 
 
      }] 
 
     }, 
 

 
     options: { 
 
      scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
       beginAtZero: true 
 
       } 
 
      }] 
 
      } 
 
     } 
 
     });

<div class="x_content"> 
 
        <canvas id="mybarChart"></canvas> 
 
        </div>

Answer 1

Wenn ich die Umgebung verstehen, Sie PHP-Webseiten produziert haben. Wenn ja würde ich:

1. eine Php-Datei erstellen
2. einige PHP-Code schreiben, um die Datenbank zu verbinden und ein Array mit den Daten abzurufen kartiert
3. Kopieren Sie die JS-Code, gewickelt werden in <script> </script> Tags und es auch in einer JS Funktion wickeln, die Sie später

4. in Ihrem JS-Code in die Seite aufrufen werden, nach Datensätzen, eine pHP-Schleife wie folgt schreiben:

   // Bar chart 
   var ctx = document.getElementById("mybarChart"); 
   var mybarChart = new Chart(ctx, { 
   type: 'bar', 
   data: { 
       labels: ["January", "February", "March", "April", "May", "June", "July"], 
       datasets: [{ 
       <?php 
       if (count($arrayOfData) > 0){ 
        echo "label: '# of Votes',"; 
        echo "backgroundColor: '#26B99A',"; 
        echo "data: ["; 
        $firstValue = true; 
        foreach ($arrayOfData as $dataValue) { 
         if (! $firstValue) { 
          echo ", ".$dataValue; 
         } else { 
          $firstValue = false; 
         } 
         echo $dataValue; 
        } 
        echo "]"; 
       } else { 
        //Decide what to do if you don't have data 
       } 
       ?> 
       }] 
   }' 
   

5. Schreiben Sie den Rest der HTML/PHP Seite.

Beachten Sie, dass, wenn Sie mehr als 1 bar in Ihrem Diagramm möchten Sie müssen auch durchlaufen verschiedene Datensätze, nicht nur durch eine, wie ich der Einfachheit halber oben zeigte.