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/