C3.js分組條形圖

Question

，我有以下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集 '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" 
    }}, 
}); 

將數據轉換兩個陣列，男性和女性。類別必須在軸聲明中明確設置。

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'], 
    }}, 

});