Как динамически передавать значения в скрипте с помощью php для создания графика

Question

Я пытаюсь создать гистограмму для данных в mysql, используя php. Я использую шаблон bootstrap для создания приложения. У меня есть предопределенный barchart со статическими данными. Я хочу добавить данные из базы данных. Я старался изо всех сил, но не смог найти решение, поскольку я начинаю работать в Javascript. Пожалуйста, направляйте меня, чтобы динамически добавлять данные. Сценарий ниже:

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

Если я понимаю окружающую среду, то есть PHP производства веб-страниц. Если это так, я бы:

1. Создать .php файл
2. Написать некоторый PHP-код для подключения к базе данных и получить массив с данными для намеченных
3. Скопируйте код JS, завернутый в <script> </script> теги, а также обернуть его в функции JS, который вы перезвоните позже на странице

4. Внутри кода JS, после того, как наборы данных, написать цикл PHP, как это:

   // 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. Напишите остальную часть страницы HTML/PHP.

Обратите внимание, что если вы хотите больше, чем 1 бар в вашем графике, вы должны также цикл с помощью различных наборов данных, а не только через один, как я показал выше, для простоты.