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

我正在这样抓图。（只有最后一个数组[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']）。

javscript数组值到chart.js图作为堆叠图

1 个答案: