Question

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

WHERE col1 = 'VALUE' AND id <> X

javascript：

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

PHP代码：

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

  });


});

我数据库中的数据是：

月：一月，二月

工资：1000,2000

有什么方法可以创建一个自动添加这些数据的循环？下个月的数据示例为：

月份：1月，2月，3月

工资：1000、2000、3000

Answer 1

在moris.js图表中，数据行（在您的情况下为月，薪水）是否需要为javascript数组？

因此，如果没有php部分，它将是这样的：

var month = [“ january”，“ february”]; var salal = [1000，2000];

？

Answer 2

简便的方法（也许不是完美的解决方案，但效果很好且易于处理）-

为图表数据（在while循环上方）声明一个php变量，例如-$chart_data = '';

在 while循环中执行下一步-

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

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

现在echo $chart_data在JavaScript函数中。喜欢-

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

完整的JavaScript功能

$(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：BarChart使用循环填充数据

2 个答案: