具有动态列数的 Google 柱形图

Google column chart with a dynamic column count

提问人:LloydC 提问时间:9/14/2023 最后编辑:LloydC 更新时间:9/16/2023 访问量:43

问:

我已经成功地编码了几个堆积柱形图,没有问题,所有柱形图都具有类似的结构,如下面的代码片段所示:

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 关联的值。项目计数是固定的,我事先知道要在图例中显示的每个项目的名称(即图表有一个图例,显示“Item1”、“Item2”、“...”、“Item5”,如我最初的 arr.push 语句中定义的那样。都很好...

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

我能看到做我想做的事的唯一方法是首先查询数据库以返回所有 DISTINCT 医疗提供者的列表,然后将该名称列表作为数组中的列提供(其中许多列的声明计数为零)。由于这看起来非常蛮力,我怀疑有更好的方法......

提前感谢您的任何帮助。

javascript json 图表 google-visualization 动态数组

评论


答:

0赞 suchislife 9/16/2023 #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

评论

0赞 LloydC 9/19/2023
suchislife - 我从未想过的很棒的方法 - 完美工作 - 谢谢!
0赞 suchislife 9/19/2023
请随意接受并继续codin'!