javascript - 在ChartJS中将多层图表分组

我已经在互联网上搜索了有关此内容的信息，但没有找到解决方案。我正在尝试实现具有分层功能的组图。基本上是1 bar，具有2个或更多数据(或颜色)。

我也尝试过此链接https://www.chartjs.org/docs/latest/charts/mixed.html，但这只是混合图表类型。请查看下面的图像以获得我想要的示例输出。



因此，上面的图片共有3种颜色，蓝色，以及黄色和橙色的混合色。有什么想法吗？

最佳答案

有一个选项可以在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
      }]
    }
  }
});

关于javascript - 在ChartJS中将多层图表分组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53001149/