C3.jsグループ化された棒グラフ

Question

I持って次のようなJSONデータ：

var data = { 
age: 
    { 
male: 
{ '0-9': 249.8740575482693, 
    '10-19': 238.2744788358169, 
    '20-29': 369.10362988529357, 
    '30-39': 156.9635033529556, 
    }, 
female: 
{ '0-9': 182.36397053287214, 
    '10-19': 265.8954005792933, 
    '20-29': 210.98459487382183, 
    '30-39': 159.24536288458913, 
    }, 
} 
} 

そして、私は、各年齢の範囲のための男性と女性とのグループ化されたC3の棒グラフを作成しようとしていますが、避難所」運がなかった。私は何が欠けていますか？

var sex = ['male', 'female']; 

var chart = c3.generate({ 
    bindto: '#chart2', 
    data: { 
    json: [data["age"]], 
    keys: { 
    value: ['0-9', '10-19', '20-29', '30-39'] 
    }, 
    type: 'bar', 
    }, 

    axis: { x: { 
    type: 'category', 
    categories: sex, 
    }}, 
}); 

Answer 1

いくつかの異なる方法：

1. フォーマットあなたのJSONはとてもx軸とその値上の各点は、アレイ内の個別のエントリです。 data.keysのSet 'X' は、データ（ここでは '名前'）のうち、カテゴリ属性を選択する

http://jsfiddle.net/38cqjqnu/1/

var data = { 
age: [ 
    {name: "0-9", male: 249.8740575482693, female: 182.36397053287214}, 
    {name: "10-19", male: 238.2744788358169, female: 265.8954005792933}, 
    {name: "20-29", male: 369.10362988529357, female: 210.98459487382183}, 
    {name: "30-39", male: 156.9635033529556, female: 159.24536288458913}, 
] 
}; 

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
    json: data["age"], 
    keys: { 
    value: ["male","female"], 
     x: "name", 
    }, 
    type: 'bar', 
    }, 
    axis: { x: { 
      type: "category" 
    }}, 
}); 

にデータを回し、

2つの配列、男性と女性。カテゴリは、軸の宣言で明示的に設定する必要があります。

http://jsfiddle.net/rgbw1pL0/1/

var data = { 
age: 
    { 
male: 
[249.8740575482693, 
    238.2744788358169, 
    369.10362988529357, 
    156.9635033529556, 
    ], 
female: 
[ 182.36397053287214, 
    265.8954005792933, 
    210.98459487382183, 
    159.24536288458913, 
    ], 
} 
} 

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
    json: data["age"], 
    type: 'bar', 
    }, 
    axis: { x: { 
      type: "category", 
     categories: ['0-9','10-19','20-29','30-39'], 
    }}, 

});