堆积条形图导致条形未对齐答案

【问题标题】：Stacked bar chart results in misaligned bars堆积条形图导致条形未对齐
【发布时间】：2017-04-29 04:05:09
【问题描述】：

我正在尝试创建一个条形图，将三个相应数据系列的条形堆叠起来。我正在使用带有角度图表的 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
                }
            }
        ]
    }
};

【问题讨论】：

标签： javascript angularjs chart.js

【解决方案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。这将为您提供所需的堆叠条形图。

【讨论】：