Javascript 如何使用ajax json制作morris甜甜圈图表？

如何使用ajax json制作morris甜甜圈图表

这是我的代码：

$(function() {

$.ajax({
    url : 'dashboard/total-data',    
}).done(function(data){
    initDonut(JSON.parse(data));
    console.log(data);
}).fail(function(){

});

var initDonut = function(data){

    return Morris.Donut({
        element: 'morris-donut-chart',
        data: [ data ],
        // data: [ 
                // {label: "BMW", value: 4},
                // {label: "Mercy", value: 0},
                // {label: "Ferrari", value: 0},
                // {label: "Toyota", value: 3},
                // {label: "Porsche", value: 0},
                // {label: "Limosin", value: 0},
                // {label: "Lamborgini", value: 3} ],
        resize: true,
        colors: ['#87d6c6', '#54cdb4','#1ab394', '#54cdb4','#1ab394', '#54cdb4','#1ab394'],
    });

} });

上面的Ajax代码返回如下数据格式：

{"BMW":4,"Mercy":0,"Ferrari":0,"Toyota":3,"Porsche":0,"Limosin":0,"Lamborgini":3}

我的问题,

如何使用javascript使上面的格式数据变成这样

[ {label: "BMW", value: 4},{label: "Mercy", value: 0},{label: "Ferrari", value: 0},{label: "Toyota", value: 3},{label: "Porsche", value: 0},{label: "Limosin", value: 0},{label: "Lamborgini", value: 3} ]

这是ShowJSON的代码：

public function total_data()
{
    $data['BMW']        = $this->m_dashboard->get_total_product_bmw();
    $data['Mercy']      = $this->m_dashboard->get_total_product_mercy();
    echo json_encode($data);
    $data['Ferrari']    = $this->m_dashboard->get_total_product_ferrari();
    $data['Toyota']     = $this->m_dashboard->get_total_product_toyota();
    $data['Porsche']    = $this->m_dashboard->get_total_product_porsche();
    $data['Limosin']    = $this->m_dashboard->get_total_product_limosin();
    $data['Lamborgini'] = $this->m_dashboard->get_total_product_lamborgini();
    echo json_encode($data);
}

---

您需要更改

总数据的代码，如下所示：-

public function total_data()
{
    $data[0]['label']= 'BMW'; 
    $data[0]['value']= $this->m_dashboard->get_total_product_bmw();

    $data[1]['label']= 'Mercy'; 
    $data[1]['value']= $this->m_dashboard->get_total_product_mercy();


    $data[2]['label']= 'Ferrari'; 
    $data[2]['value']=  $this->m_dashboard->get_total_product_ferrari();

    $data[3]['label']= 'Toyota'; 
    $data[3]['value']=  $this->m_dashboard->get_total_product_toyota();

    $data[4]['label']= 'Porsche'; 
    $data[4]['value']=  $this->m_dashboard->get_total_product_porsche();

    $data[5]['label']= 'Limosin'; 
    $data[5]['value']=  $this->m_dashboard->get_total_product_limosin();

    $data[6]['label']= 'Lamborgini'; 
    $data[6]['value']=  $this->m_dashboard->get_total_product_lamborgini();

    echo json_encode($data);
}

jQuery代码必须是：-

在我这边工作：-
问题似乎主要是，我如何从

{key: foo, key2:bar}

到

我是lodash和lodash等图书馆的超级粉丝。如果您有Ramda，我会推荐如下产品：


var输入={
“宝马”：4，
“仁慈”：0，
“法拉利”：0，
“丰田”：3，
“保时捷”：0，
“Limosin”：0，
“兰博基尼”：3
}
预期风险值=[{
标签：“宝马”，
价值：4
}, {
标签：“仁慈”，
数值：0
}, {
标签：“法拉利”，
数值：0
}, {
标签：“丰田”，
价值：3
}, {
标签：“保时捷”，
数值：0
}, {
标签：“Limosin”，
数值：0
}, {
标签：“兰博基尼”，
价值：3
}]
//我们要做的第一件事是将键和值组合在一起
var对=R.toPairs（输入）；
//这让我们有点像
//[[“宝马”，4]，“仁慈”，0]，…]
//这里要解释的有点远但是Ramda
//咖喱所有它的功能，所以我们可以传递标签
//先来看看，然后再看看。
var label=R.zipObj（[“label”，“value”]）；
//这里，我们将标签函数映射到每组对上
var输出=pairs.map（标签）；
磁带（'相同？'，t=>{
t、 深度相等（预期，产量）；
t、 end（）；
});

显示
总数据
代码？因为我做了，谢谢，这很好。。你救了我一天……）@西尔维亚祖林卡很高兴帮助你：）：）
{key: foo, key2:bar}

[{label: key, value:foo},{label: key2, value:bar}]