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

2023年3月30日 194次阅读

我正在尝试创建一个条形图,用于堆叠三个相应数据系列的条形图.我正在使用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 – 堆积的条形图导致未对齐的条形图》

最佳答案 您还应该为x轴设置stacked：true.因此,您的秤应如下所示：

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

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

点赞