c3 - 使用c3 js的JSON饼图

Question

以代码为例。

我需要生成一个饼图，该饼图具有4个分区（site1，site2 ...），每个分区对应于其各自的上载值。

在上面的代码中，我无法实现这一点（我指定了值：['upload']）...

我必须指定的确切值是多少？

谢谢..

  chart = c3.generate({
            data: {
                json: [
                    {name: 'www.site1.com', upload: 200},
                    {name: 'www.site2.com', upload: 100},
                    {name: 'www.site3.com', upload: 300},
                    {name: 'www.site4.com', upload: 400},
                ],
                keys: {
    //                x: 'name', // it's possible to specify 'x' when category axis
                    value: ['upload'],
                },
                type:'pie'
            },
            axis: {
                x: {
    //                type: 'category'
                }
            }
        });

Answer 1

饼图将每个属性映射到饼图扇区。您可以像这样重新格式化JSON

var jsonData = [
    {name: 'www.site1.com', upload: 200},
    {name: 'www.site2.com', upload: 100},
    {name: 'www.site3.com', upload: 300},
    {name: 'www.site4.com', upload: 400}
]

var data = {};
var sites = [];
jsonData.forEach(function(e) {
    sites.push(e.name);
    data[e.name] = e.upload;
})    

chart = c3.generate({
    data: {
        json: [ data ],
        keys: {
            value: sites,
        },
        type:'pie'
    },
});

工作提琴-http://jsfiddle.net/2nf9a7x4/