如何用 ajax json 制作莫里斯圆环图？

Question

这是我的代码：

$(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 上面的代码 return 数据格式如下：

{"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(){

    });
});

在我这边工作：- http://prntscr.com/f6399z

Answer 2

看来问题主要是，我如何从

{key: foo, key2:bar}

到

[{label: key, value:foo},{label: key2, value: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>

如何用 ajax json 制作莫里斯圆环图？

How to make morris donut chart with ajax json?

javascript

ajax

jquery

json

donut-chart