使用C3.js+Angular2时，如何按formula属性对图表数据分组？

当然可以实现！你当前的问题核心是数据结构还没调整到按formula维度分组的格式，配合C3的配置就能轻松搞定。下面分两步来解决：

1. 重新转换原始数据为Formula分组格式 #

你现在的column数据是把行（row）和formula拼接成了x轴项，这不符合按formula分组的需求。我们需要先把原始的jsonData重新聚合，提取每个formula对应的列（col）值。

这里提供一个简单的数据转换函数：

// 初始化分组容器，预先定义我们要的formula类型
const formulaGroups = {
  formula1: { c1: null, c2: null },
  formula2: { c1: null, c2: null }
};

// 遍历原始数据，填充对应formula的列值
jsonData.forEach(item => {
  // 找到当前条目里的formula属性（比如formula1、formula2）
  const formulaKey = Object.keys(item).find(key => key.startsWith('formula'));
  if (formulaKey) {
    // 把对应col的值存入分组，转成数字类型
    formulaGroups[formulaKey][item.col] = parseInt(item[formulaKey], 10);
  }
});

// 转换为C3要求的列格式
const groupedColumn = [
  ['x', 'c1', 'c2'],
  ['formula1', formulaGroups.formula1.c1, formulaGroups.formula1.c2],
  ['formula2', formulaGroups.formula2.c1, formulaGroups.formula2.c2]
];

转换后的groupedColumn就完全按formula1和formula2分组了，每个formula下对应c1和c2的数值。

2. 配置C3.js实现分组可视化 #

接下来在C3的图表配置里，我们可以设置分组柱状图的显示效果（如果需要的话）：

// 在Angular组件的ngAfterViewInit钩子中初始化图表（确保DOM已加载）
ngAfterViewInit() {
  c3.generate({
    bindto: '#your-chart-element', // 替换成你的图表DOM元素ID
    data: {
      columns: groupedColumn,
      type: 'bar',
      // 可选：把c1和c2设置为一组，每个formula下的两个柱子会挨在一起显示
      groups: [['c1', 'c2']]
    },
    axis: {
      x: {
        type: 'category',
        categories: ['formula1', 'formula2'] // 明确x轴的分类标签
      }
    }
  });
}

如果你的需求是把formula作为数据系列、col作为x轴，只需要调整数据结构和配置即可——核心思路都是先按formula维度正确聚合数据。

内容的提问来源于stack exchange，提问作者Shyam Devasia