javascript-将JSON转换为正确的格式以放入Morris条形图插件

我正在使用Morris条形图插件. You can see an example here.

插入到图表中的正确数据格式如下：

data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],

我想用PHP的ajax请求来填充该信息.

$.ajax({
    url: 'getchart.php',
    success: function(content){

        console.log(content); // Native return

        var element = [];   
        var json    = JSON.parse(content);

        for(var i = 0; i <= json.length - 1; i++){
            element[i] = {y: json[i][0].month, a: json[i][0].total};
        }

        console.log(element);
    }
});

我已经成功完成了请求,但是我确实需要将从ajax获得的json转换为morris图表所需的格式.

[[{"total":1,"Month":7,"description":"Started"},
{"total":1,"Month":6,"description":"Started"}],
[{"total":3,"Month":6,"description":"Started"}]] 

上面的代码是变量内容输出的内容.这里的问题是一个索引包含2个子索引,而另一个索引仅包含一个子索引：

索引1：

[{"total":1,"Month":7,"description":"Started"},
 {"total":1,"Month":6,"description":"Started"}],

第二个索引只包含一个子索引

索引2：

[{"total":3,"Month":6,"description":"Started"}]],

发生这种情况是因为我在PHP中将两个不同的数组合并为一个.

$AN = $chart->chartAN(); // Apresentation and Negociation
$AC = $chart->chartAC(); // Accomplished

$final = array($AN, $AC);

echo json_encode($final);

而且,两个函数的输出是相同的：

while($query->fetch()){     
  $rows[] = array("total" => $total, "month" => $month, "description" => $type);
}

当前,console.log(element)返回我：

[Object, Object];
    > 0: Object
        a: 1
        y: 7

    > 1: Object
        a: 3
        y: 6

我的最终结果是：

element: [
          { y: 'April', a: value_from_chartAN, b: value_from_chartAC },
          { y: 'May',   a: value_from_chartAN, b: value_from_chartAC },
         ],

编辑：澄清问题(因为我知道不是那么简单).

我希望我的输出是：

element: [
              { y: month_from_database, a: value_from_chartAN, b: value_from_chartAC },
              { y: month_from_database, a: value_from_chartAN, b: value_from_chartAC },
             ],

由于value_from_chartAN或value_from_chartAC可能为null,因此必须添加数字0.
如果您查看莫里斯的示例：http://jsbin.com/uzosiq/258/embed?javascript,live

年份对应于我的月份,蓝色条对应于value_from_chartAN,灰色条对应于value_from_chartAC.

解决方法:

主要问题是您的PHP返回值(您将发送的JSON)与条形图所需的结构不同.您需要先将其展平.从那里,您的代码应该可以正常工作. Sample Fiddle

考虑以下示例：

<?php
if(isset($_POST['get_values'])) {
    // replication of your data
    $final = '[[{"total":1,"Month":7,"description":"Started"},{"total":1,"Month":6,"description":"Started"}],[{"total":3,"Month":6,"description":"Started"}]]';
    $final = json_decode($final, true);
    $new_final = array();
    // simple flattening
    foreach($final as $value) {
        foreach($value as $sub_value) {
            $new_final[] = $sub_value;
        }
    }

    echo json_encode($new_final);
    exit;
}

?>

<div id="bar-example"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $.ajax({
        url: document.URL, // getchart.php
        dataType: 'JSON',
        type: 'POST',
        data: {get_values: true},
        success: function(response) {
            Morris.Bar({
                element: 'bar-example',
                data: response,
                xkey: 'description',
                ykeys: ['Month', 'total'],
                labels: ['Month', 'Total']
            });
        }
    });

});
</script> 

标签：morris-js,json,javascript,php,jquery
来源： https://codeday.me/bug/20191029/1959935.html