如何构建堆叠项数量与名称动态可变的Google堆叠柱状图？

核心思路：动态构建数据表列与数据行 #

无需预先查询所有唯一医疗提供商，直接从返回的jsonData中提取所有出现过的提供商名称，动态生成表头，再按日期分组填充对应数据，缺失项自动补0。

具体实现代码 #

// 1. 从所有数据中提取唯一的医疗提供商名称
const providers = new Set();
jsonData.forEach(item => {
  // 过滤掉date字段，收集所有提供商键名
  Object.keys(item).forEach(key => {
    if (key !== 'date') {
      providers.add(key);
    }
  });
});
const providerList = Array.from(providers);

// 2. 构建表头数组
const arr = ['Date', ...providerList];

// 3. 按日期分组整理数据，确保每个日期包含所有提供商的数据
const dateGroupedData = {};
jsonData.forEach(item => {
  const date = item.date;
  if (!dateGroupedData[date]) {
    dateGroupedData[date] = { date };
  }
  // 存入当前项的提供商索赔数据
  Object.keys(item).forEach(key => {
    if (key !== 'date') {
      dateGroupedData[date][key] = Number(item[key]);
    }
  });
});

// 生成最终数据行，缺失的提供商数据填0
Object.values(dateGroupedData).forEach(group => {
  const row = [group.date];
  providerList.forEach(provider => {
    row.push(group[provider] || 0);
  });
  arr.push(row);
});

// 4. 转换为Google可视化数据表
var data = new google.visualization.arrayToDataTable(arr);

关键说明 #

• 动态提取提供商：遍历数据项的键名自动收集所有提供商，省去额外数据库查询步骤。
• 日期分组处理：避免同一日期多条数据的混乱，同时保证每个日期行包含完整的提供商数据维度。
• 兼容原有逻辑：最终生成的数组结构和固定项版本完全一致，可直接适配Google图表的arrayToDataTable方法。

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