ajax jsonでmorrisドーナツチャートを作成するには？

Question

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} ] 

これはショーのJSONのためのコードです：

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); 
} 

Answer 1

あなたは以下のようにtotal-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のコードする必要があります： -

$(function() { 

    $.ajax({ 
     url : 'dashboard/total-data',  
    }).done(function(data){ 
     Morris.Donut({ 
      element: 'morris-donut-chart', 
      data: JSON.parse(data), 
      resize: true, 
      colors: ['#87d6c6', '#54cdb4','#1ab394', '#54cdb4','#1ab394', '#54cdb4','#1ab394'] 
     }); 

    }).fail(function(){ 

    }); 
}); 

0私の最後で働く

： -http://prntscr.com/f6399z

Answer 2

質問のほとんどは、どのように私は

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

に

{key: foo, key2:bar} 

から入手できますされるように私はいるようですlodashとramdaのような図書館の巨大なファン。あなたが利用可能RAMDAを持っていた場合、私のようなものをお勧めします。そうしないと

var input = { 
 
    "BMW": 4, 
 
    "Mercy": 0, 
 
    "Ferrari": 0, 
 
    "Toyota": 3, 
 
    "Porsche": 0, 
 
    "Limosin": 0, 
 
    "Lamborgini": 3 
 
} 
 
var expected = [{ 
 
    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 
 
}] 
 

 

 
// First thing we want is to group the key and value together 
 
var pairs = R.toPairs(input); 
 

 
// This gives us something like 
 
// [["BMW",4],["Mercy",0],...] 
 

 
// This is getting a little far to explain here but Ramda 
 
// curries all it's functions so we can pass the labels 
 
// here and then the pairs later. 
 
var label = R.zipObj(["label", "value"]); 
 

 
// Here we map the label function over each set of pairs 
 
var output = pairs.map(label); 
 

 
tape('Same?', t => { 
 
    t.deepEqual(expected, output); 
 
    t.end(); 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script> 
 
<script src="https://wzrd.in/standalone/tape@latest"></script>

を、あなたは、forループで何かを行うことができます。

var input = { 
 
    "BMW": 4, 
 
    "Mercy": 0, 
 
    "Ferrari": 0, 
 
    "Toyota": 3, 
 
    "Porsche": 0, 
 
    "Limosin": 0, 
 
    "Lamborgini": 3 
 
} 
 
var expected = [{ 
 
    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 
 
}] 
 
var output = []; 
 
for (var k in input) { 
 
    output.push({"label": k, "value": input[k]}); 
 
} 
 

 
tape('Same?', t => { 
 
    t.deepEqual(expected, output); 
 
    t.end(); 
 
});

<script src="https://wzrd.in/standalone/tape@latest"></script>