在 ChartJS 中使用多个图层对图表进行分组答案

【问题标题】：Group Chart with multiple layers in ChartJS在 ChartJS 中使用多个图层对图表进行分组
【发布时间】：2019-03-30 18:24:28
【问题描述】：

我已经在互联网上搜索过这个问题，但我没有找到解决方案。我正在尝试实现具有层分离的组图。基本上，1 个条形图有 2 个或更多数据（或颜色）。

我也试过这个链接https://www.chartjs.org/docs/latest/charts/mixed.html，但它只是一个混合图表类型。请参阅下图了解我想要实现的示例输出。

所以上图一共有3种颜色，蓝色，黄色和橙色混合。有什么想法吗？

【问题讨论】：

如果我理解正确，您希望一个数据集显示在一个条形图中，另外两个数据集显示在堆叠条形图形式中？
嗨@KunalKhivensara。是的，很抱歉造成混乱。
我真的怀疑这是否可能，因为堆叠条形图也是一种条形图，要使用 chart.js 创建混合图表，您必须指定堆叠和简单的不同类型条形图。
嗨@KunalKhivensara。顺便说一下，堆叠条是什么意思？你说的是水平的吗？
在我的第一条评论中，我问您是否需要同时显示堆叠条和简单条，您说“是”。现在你在问什么是堆叠条？这很奇怪。您示例中的蓝色条是简单条，单个条中的橙色和黄色组合是堆叠条。

标签： javascript chart.js

【解决方案1】：

在 chart.js 中有一个创建堆叠组图的选项，您可以在其中根据分组需要指定 stack 属性。请参阅下面的代码或小提琴 -> http://jsfiddle.net/4h6dm2ny/

希望对你有帮助！

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["13Aug", "14Aug", "15Aug"],
    datasets: [{
        label: 'Blue',
        stack: 'Stack 0',
        data: [240, 270, 1320],
        backgroundColor: 'blue',
      },
      {
        label: 'Orange',
        stack: 'Stack 1',
        data: [0, 300, 1520],
        backgroundColor: 'orange',
      },
      {
        label: 'Yellow',
        data: [1500, 700, 200],
        stack: 'Stack 1',
        backgroundColor: 'yellow',
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

【讨论】：

这仅适用于 ChartJS 的 2.7.3 版本吗？
不知道，参考chart.js文档