C3.js將條形圖與外部json數據分組

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，以便xaxis上的每個點及其值都是數組中的單獨條目。 在data.keys中設置“ x”以從數據中選擇類別屬性（此處為“ name”）

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

});