我正在使用莫里斯条形图插件。 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"}]] 

上面的代码是变量content输出的内容。这里的问题是一个索引包含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 可能为空，因此它必须添加数字 0。 如果您查看 Morris 的示例: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> 

关于javascript - 将 JSON 转换为正确的格式以放入 Morris Bar Chart 插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24304545/