Javascript 使用每个堆栈一个数据集创建堆叠条形图

假设我有以下数据点：

let points=[
{键：“foo”，值：1}，
{键：“foo”，值：2}，
{键：“foo”，值：1}，
{键：“条”，值：2}，
{键：“条”，值：1}
];

我想创建一个类似于以下内容的图表：

  5 +-------------------------------+
    |                               |
  4 |      +-----+                  |
    |      |     |                  |
  3 |      +-----+      +-----+     |
    |      |     |      |     |     |
  2 |      |     |      +-----+     |
    |      |     |      |     |     |
  1 |      +-----+      |     |     |
    |      |     |      |     |     |
  0 +------+-----+------+-----+-----+
             foo          bar

实际的数据集有许多不同的堆栈，我在本例中对其进行了简化。我已经能够通过以下方式实现效果，但每个点都被视为自己的数据集，我觉得应该有一个更干净、更高效的解决方案：

let datasets = [
    {label: "foo", stack: "foo", data: [1]},
    {label: "foo", stack: "foo", data: [2]},
    {label: "foo", stack: "foo", data: [1]},
    {label: "bar", stack: "bar", data: [2]},
    {label: "bar", stack: "bar", data: [1]}
];

---

每个数据集的值都分布到各个堆叠的条形图上。因此，所需的数据集数量对应于堆叠条中可以包含的最大值数量

因此，对于您的示例，您需要以下三个数据集：

[1, 2]
[2, 1]
[1, 0]

堆叠横条图
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
风险值数据={
标签：['foo'，'bar']，
数据集：[{
背景颜色：“红色”，
数据：[1,2]
}, {
背景颜色：“绿色”，
数据：[2,1]
}, {
背景颜色：“蓝色”，
数据：[1,0]
}]
};
window.onload=函数（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：数据，
选项：{
标题：{
显示：对，
文本：“堆叠条形图”
},
工具提示：{
模式：“索引”，
交集：错
},
图例：{
显示：假
},
回答：是的，
比例：{
xAxes：[{
对,，
}],
雅克斯：[{
是的
}]
}
}
});
};

因此，我必须遍历所有对象，找出最大的堆栈，然后将它们正确地分布在一个数组中，使它们具有相同的高度（堆栈中不存在0）。这就是我害怕的，我希望能够将每个堆栈作为一个数据集。非常感谢。