具有动态列数的 Google 柱形图

Question

我已经成功地编码了几个堆叠柱形图，没有任何问题，所有图表都具有类似的结构，如下面的代码片段所示：

arr.push(['Date', 'Item1', 'Item2', 'Item3', 'Item4', 'Item5']);
for (let i = 0; i < elementCount; i++)
{
    arr.push
    (
        [
            jsonData[i].date,
            Number(jsonData[i].item1),
            Number(jsonData[i].item2),
            Number(jsonData[i].item3),
            Number(jsonData[i].item4),
            Number(jsonData[i].item5)
        ]
    );
}
var data = new google.visualization.arrayToDataTable(arr);

当我执行上面的代码时，我得到几个堆积的列（按日期），其中每列由几个堆栈组成，表示与数组中的 item1-item5 关联的值。项目计数是固定的，并且我提前知道要在图例中显示的每个项目的名称（即图表有一个图例显示我的初始 arr 中定义的“Item1”、“Item2”、...、“Item5” .push 声明。一切都好...

现在我正在尝试做一些看似非常相似的事情，但我事先不知道组成任何一个堆叠列的不同项目的数量或名称。这些项目是从数据库中读取的，对于一列可能只有一个“堆栈”项目，而对于另一列可能有 5 个“堆栈”项目。在实践中，我想做的是按时间顺序列出医疗提供者的医疗索赔，而我事先不知道医疗提供者的名称或数量。每列将包含当月提交的医疗索赔，并以颜色编码的“堆栈”映射到特定的医疗提供者（其名称将显示在图例中）。

我能看到做我想做的事情的唯一方法是首先查询数据库以返回所有不同医疗提供者的列表，然后将该名称列表作为数组中的列提供（其中许多的索赔计数为零）。由于这看起来非常暴力，我怀疑有更好的方法......

预先感谢您提供的所有帮助。

Answer 1

您可以根据所有唯一的提供者动态构建标头数组，并通过将这些提供者映射到每个日期各自的声明计数来填充数据行。

// Create a set to store all unique medical providers, and an array to store the formatted data
let uniqueProviders = new Set();
let formattedData = [];

// Loop through your JSON data to populate 'uniqueProviders' and initialize 'formattedData'
jsonData.forEach(record => {
  uniqueProviders.add(record.provider);
  if (!formattedData.some(entry => entry.date === record.date)) {
    formattedData.push({ date: record.date, claims: {} });
  }
  let dateEntry = formattedData.find(entry => entry.date === record.date);
  dateEntry.claims[record.provider] = record.claimCount;
});

// Convert 'uniqueProviders' to an array and sort it, then create the header
let sortedProviders = Array.from(uniqueProviders).sort();
let header = ['Date', ...sortedProviders];

// Create an array to hold your Google Charts data, starting with the header
let arr = [header];

// Populate 'arr' with the data for each date
formattedData.forEach(record => {
  let row = [record.date];
  sortedProviders.forEach(provider => {
    row.push(record.claims[provider] || 0);
  });
  arr.push(row);
});

// Create the Google Chart data object
var data = new google.visualization.arrayToDataTable(arr);

我在整个过程中添加了注释，显示了提取唯一提供程序、初始化格式化数据结构，然后填充此结构的步骤。最后，它根据 Google Charts 的要求构造了

arrayToDataTable

。