使用数组构建C3.js堆叠条形图无结果问题求助

我帮你分析了静态和动态数据版本的差异，问题大概率出在动态数组的格式不符合C3.js的要求上。

核心差异点 #

静态数据版本里，你传递给columns的是标准的二维数组结构：每个子数组的第一个元素是系列名称（字符串），后面跟着对应的数据值（数字），比如：

columns: [
  ['data1', 30, 200, 100],
  ['data2', 130, 100, 140],
  ['data3', 90, 250, 150]
]

而动态数组版本中，你构造的数组可能没有遵循这个结构——比如系列名的位置不对、数据类型不是数字，或者整个数组的层级有误，导致C3无法识别并渲染图表。

解决方案 #

1. 严格匹配静态数据的结构
   动态生成数组时，要确保每个系列都是独立的子数组，第一个元素必须是字符串类型的系列名，后续是数字类型的数据值。比如：

   // 示例：动态构建符合要求的columns数组
   var dynamicData = [];
   // 模拟动态获取数据的过程
   var seriesNames = ['data1', 'data2', 'data3'];
   var seriesValues = [[30,200,100], [130,100,140], [90,250,150]];
   
   for (let i = 0; i < seriesNames.length; i++) {
     // 把系列名和对应值合并成一个子数组
     var series = [seriesNames[i], ...seriesValues[i]];
     dynamicData.push(series);
   }
   
   // 生成图表
   var chart = c3.generate({
     data: {
       columns: dynamicData,
       type: 'bar',
       groups: [['data1', 'data2', 'data3']]
     },
     bar: { stacked: true }
   });
   

2. 检查数据类型
   确保动态获取到的数据值是数字类型，如果是字符串（比如从接口返回的字符串格式数字），需要先转换成数字，否则C3无法正确解析。

3. 调试验证
   在生成动态数组后，用console.log(dynamicData)打印出来，和静态版本的数组结构做对比，确认两者完全一致——这是快速定位问题的好办法。

内容的提问来源于stack exchange，提问作者Simon Price