JavaScript数组值以chart.js图形为堆叠图形

Question

我有以下数据

new Chart(ctx2, {
  type: 'bar',
  data: {

    labels: $scope.teamGraphAssociateName,
    datasets: [{
        data: $scope.teamGraphAgileRewards,
        backgroundColor: $scope.backgroundColors,
        borderWidth: 1.5
      }

    ]
  }
});

此数据从标签获取（X轴）上所有关联者名称的成功数据。对于控制台中的$ scope.teamGraphAgileRewards，我得到的数据如下：

(3) [Array(1), Array(2), Array(1)]
0: [7]
1: (2) [2, 3]
2: [10]
length: 3

我得到了这样的grap。（只有最后一个数组[10]在图表上可见）

Y
|
|      
|
|          10
|_______________ X
 ASS1 ASS2 ASS3 
    (labels) 

但我希望这些数据在堆叠条形图上可见。

Y
|
|      3
|
| 7    2    10
|_______________ X
 ASS1 ASS2 ASS3 
    (labels)

Answer 1

那么，您需要重新排列数据。图表的数据结构与您发送到图表的数据结构不同。见例子：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["ASS1", "ASS2", "ASS3"],
        datasets: [{
        stack: 'Stack 0',
        data: [7, 3, 10],
        backgroundColor: 'blue'
    },
    {
        stack: 'Stack 0',
        data: [0, 2, 0],
        backgroundColor: 'green'
    }]
    },
    options: {
        legend: {
            display: false
        },
        responsive: false,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

这就是你的图表应该是这样的。您添加到数据集的每个数据都会发送到标签，因此当您在阵列中发送无法识别的数组时，您希望为一个标签添加多个值。对你的值进行分组，你有一个数据集的3个值（['ASS1value'，'ASS2value'，'ASS3value']），就像我在样本中添加的那样。