Сложенная гистограмма приводит к смещению баров

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 для оси х. Ваш scales должен, следовательно, выглядеть следующим образом:

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

Посмотрите на Bar Chart Options и в первом примере кода секции. В этом примере кода для обеих осей устанавливается ось stacked: true, ось x и ось y. Это даст вам стекную гистограмму, как вы этого хотите.