堆积条形图导致未对齐的条形图

Question

我试图创建一个条形图，用于堆叠三个相应数据系列的条形图。我使用Chart.js和角度图表。我有相应的堆叠属性设置：stacked: true，但条形图不会垂直对齐。

基本上，我的问题是：如何使每个系列的数据排成一行，以使条形宽度均匀但垂直交错颜色？

这是我的一些图表配置代码：

$scope.barLabels = ['-120 to -80', '-80 to -70', '-70 to -60', '-60 to -50', '-50 to -10'];
$scope.barData = [
    [3, 9, 2, 11, 5],
    [6, 9, 2, 11, 5],
    [2, 1, 2, 4, 5]
];

$scope.barOptions = {
    legend: {
        display: false
    },
    scales: {
        yAxes: [
            {
                stacked: true,
                display: true,
                position: 'left',
                ticks: {
                    beginAtZero: true,
                    min: 0
                }
            }
        ]
    }
};

Answer 1

您还应该为x轴设置stacked: true。因此，scales应该是这样的：

...
scales: {
    xAxes: [{
        stacked: true
    }],
    yAxes: [{
        stacked: true,
        display: true,
        position: 'left',
        ticks: {
            beginAtZero: true,
            min: 0
        }
    }]
}
...

查看Bar Chart Options以及该部分的第一个代码示例。在此代码示例中，为两个轴，x轴和y轴设置stacked: true。这将为您提供所需的堆积条形图。