带有外部 json 数据的 C3.js 分组条形图答案

【问题标题】：C3.js grouped bar chart with external json data带有外部 json 数据的 C3.js 分组条形图
【发布时间】：2017-08-12 03:30:46
【问题描述】：

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

【问题讨论】：

标签： javascript json c3.js

【解决方案1】：

几种不同的方式：

格式化您的 json，使 xaxis 上的每个点及其值都是数组中的一个单独条目。在 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'],
  }},

});

【讨论】：