web-dev-qa-db-ja.com

c3jsを使用したjsonの円グラフ

コードは例として取り上げられています。

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'
                }
            }
        });
c3
15
Nithin A

円グラフは、各プロパティを円グラフにマップします。 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/

15
potatopeelings