使用两个数据集的谷歌数据可视化堆叠条形图

Question

我正在使用谷歌数据可视化图表。我有一个 2 列 4 行的数据表。我需要将此数据显示到单个堆叠条形图中，如下所示

我的数据样本：

var data = new google.visualization.DataTable();
data.addColumn('string', 'name');
data.addColumn('number', 'count');
data.addRows([
    ['abc', 321],
    ['def', 163],
    ['ghi', 125],
    ['jkl', 197]
]);

我尝试通过启用 isStacked:true 来使用柱形图和条形图，但没有运气。 有没有一种方法可以在单个堆叠图表中显示数据，如图所示。我不介意它是条形图还是柱形图。

如果有人可以帮助我，我将不胜感激。

谢谢。

Answer 1

问题是现在没有任何东西将不同的列连接在一起，因此没有理由将它们堆叠在一起。

您需要让每个元素共享一个公共元素，例如日期。接下来，您需要为每个不同的“名称”字段添加单独的列。最后，在添加值时，仅将它们添加到与 (name, value) 对匹配的列索引中。

data.addColumn('number', 'irrelevant');
data.addColumn('number', 'abc');
data.addColumn('number', 'def');
data.addColumn('number', 'ghi');
data.addColumn('number', 'jkl');
data.addColumn('number', 'mno');
data.addRows([
    [0, 321, 0, 0, 0, 0],
    [0, 0, 163, 0, 0, 0],
    [0, 0, 0, 125, 0, 0],
    [0, 0, 0, 0, 452, 0],
    [0, 0, 0, 0, 0, 825]
]);

这种事情手工做很烦人，所以在我的图表系统中，我遍历所有不同分组的列表（或在你的情况下为“名称”）并跟踪每个索引，以便我知道哪个元素要指定的单个行。

这是我的代码中的一个小示例，因此您可以得到正确的想法：

GoogleDataTable.addColumn('number', 'Age');

var GroupIndex = 0;
var DateIndex = 0;

for (var i = 0; i < RawJSON.length; i++) {
    //If the groupkey is not in the group array yet.
    if (GroupArray.indexOf(RawJSON[i][GroupKey]) == -1) {
        GroupArray[GroupIndex] = RawJSON[i][GroupKey];
        GroupIndex++;
        GoogleDataTable.addColumn('number', RawJSON[i][GroupKey]);
    }
    //If the timeslice is not yet in the Date array.
    if (DateArray.indexOf(RawJSON[i]["Age"]) == -1) {
        DateArray[DateIndex] = RawJSON[i]['Age'];
        DateIndex++;
    }
}

后来

var groupIndex = GroupArray.indexOf(RawJSON[i][GroupKey]) + 1;
for (var j = 1; j <= GroupIndex; j++) {
    if (j == groupIndex) {
       RowArray[insertIndex][groupIndex] = RawJSON[i]['Value'];
    }
}