堆叠的条形图导致条块不齐

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

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

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

看一看Bar Chart Options，并在这一节的第一个代码示例。在此代码示例中，stacked: true被设置为两个轴，x轴和y轴。这将会为你提供一个堆积的条形图。