JavaScript：条形图使用循环填充数据

Question

你好，我在从我的数据库中填充 javascript 条形图时遇到问题我正在使用 morris.js 条形图我的代码 html 如下：

<div class="chart" id="bar-chart" style="height: 300px;"></div>

javascript:

  <script>
  

$(function () {
  "use strict";    
  //BAR CHART
  var month = <?php echo json_encode($result_array, JSON_HEX_TAG); ?>;
  var salary = <?php echo json_encode($result_array2, JSON_HEX_TAG); ?>;
  var bar = new Morris.Bar({
      element: 'bar-chart',
      resize: true,
      data: [
        {y: month, a: salary},

       ]
      ,
      barColors: ['#00a65a', '#f56954'],
      xkey: 'y',
      ykeys: ['a'],
      labels: ['Date', 'Total'],
      hideHover: 'auto'

  });
  
  
});

PHP代码：

  <?php 
   $q  = mysqli_query($con,"SELECT * FROM salary_logs 
   ORDER BY id ASC LIMIT 5");
    $result_array = array();
    while($row = mysqli_fetch_assoc($q))
   {
     $result_array[] = $row['month'];
     $result_array2[] = $row['salary'];
     echo json_encode($result_array, JSON_HEX_TAG);
   }
  ?>

我的数据库中的数据是：

month: january , february

salary: 1000,2000

有什么方法可以创建一个自动添加这些数据的循环吗？例如，下个月的数据将是：

month: january, february, march

salary: 1000, 2000, 3000

Answer 1

在 moris.js 图表中，数据行（在您的例子中是月份、薪水）是否需要是 javascript 数组？

所以如果没有 php 部分，它将是这样的：

var 月 = ["january", "february"]; var 工资 = [1000, 2000];

?

Answer 2

执行此操作的简单方法（可能不是完美的解决方案，但工作正常且易于处理）-

Declare a php variable for chart data (above while loop) like - $chart_data = '';

下一步在 while 循环中 执行 -

$chart_data = ''; // variable for chart data

while($row = mysqli_fetch_assoc($q))
{
    $chart_data .= "{ y: '" . $row['month'] . "', a: " . $row['salary'] . " },";
}

Now echo $chart_data inside JavaScript function. like-

data: [ <?php echo $chart_data; ?> ],

Full JavaScript Function

$(function() {
    "use strict";
    //BAR CHART
    var month = <?php echo json_encode($result_array, JSON_HEX_TAG); ?>;
    var salary = <?php echo json_encode($result_array2, JSON_HEX_TAG); ?>;
    var bar = new Morris.Bar({
        element: 'bar-chart',
        resize: true,

        data: [ <?php echo $chart_data; ?> ],

        barColors: ['#00a65a', '#f56954'],
        xkey: 'y',
        ykeys: ['a'],
        labels: ['Date', 'Total'],
        hideHover: 'auto'

    });    

});

JavaScript：条形图使用循环填充数据

JavaScript: BarChart populate data using loop

javascript

arrays

loops

bar-chart

morris.js