使用c3 js的JSON饼图 [英] pie chart from json using c3 js

问题描述

以代码为例。

我需要生成一个饼图，该饼图具有4个分区（site1，site2 ...），每个分区对应于其

I need to generate a pie chart having 4 divisions (site1,site2...)each division correspond to its respective upload value.

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

In the above code i am not able to achieve this(I have specified value:['upload'])...

我必须指定确切的值是什么？

what is the exact value i have to specify?

谢谢..

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

推荐答案

饼图将每个属性映射到饼图扇区。您可以重新格式化JSON，例如

The pie chart maps each property to a pie sector. You could reformat your JSON like

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/

这篇关于使用c3 js的JSON饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！