2017-02-23 18 views
1

Я пытаюсь создать гистограмму для данных в mysql, используя php. Я использую шаблон bootstrap для создания приложения. У меня есть предопределенный barchart со статическими данными. Я хочу добавить данные из базы данных. Я старался изо всех сил, но не смог найти решение, поскольку я начинаю работать в Javascript. Пожалуйста, направляйте меня, чтобы динамически добавлять данные. Сценарий ниже:Как динамически передавать значения в скрипте с помощью 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: [{ 
 
      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>

+0

Как выглядят данные при выходе из БД? Общий намек: вам нужно что-то вроде «echo» javascriptdata = ». json_encode ($ phpdata). ";"; ' – Jeff

ответ

0

Если я понимаю окружающую среду, то есть 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 бар в вашем графике, вы должны также цикл с помощью различных наборов данных, а не только через один, как я показал выше, для простоты.

 Смежные вопросы

  • Нет связанных вопросов^_^