图表中的堆积组条形图.js :我可以给每个堆叠组一个独特的颜色吗?

Question

对于常规条形图，您可以传递颜色数组，对于堆叠组条形图，我根本找不到开箱即用的方法为其提供数组并为其提供每个组的颜色。每天将有 2 个条形，而这两个条形每天应该有一个单独的颜色，由我检索的数组提供。

有没有办法调整它以使其工作？感觉它比实际应该的要复杂得多。

例如，第 1 天组为绿色，第 2 天组为红色，第 3 天为蓝色。等 颜色编码根据每天注册的内容。

https://i.stack.imgur.com/mFysC.jpg

在这个照片示例中，我将有 4 种不同的颜色

    <script>
        var ctx = document.getElementById('myChart2').getContext('2d');
        var myChart2 = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [";
    echo $dateLabelArray;
    echo "],
                datasets: [{
                    label: 'AM',             backgroundColor:
                    'rgba(255, 99, 132, 0.7)'
                ,
                borderColor:
                    'rgba(255, 99, 132, 1)'
                ,
                borderWidth: 1.5,
                    stack: 'Stack 0',
                    data: [";
    echo $amArray;
    echo "]
                }, {
                    label: 'PM', backgroundColor:
                    'rgba(28, 159, 246, 0.7)'
                ,
                borderColor:
                    'rgba(28, 159, 246, 1)'
                ,
                borderWidth: 1.5,
                    stack: 'Stack 1',
                    data: [";
    echo $pmArray;
    echo "]
                }]
            },
            options: {
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true,
                                callback: function (label, index, labels) {
                                    switch (label) {
                                        case 0:
                                            return 'Challenged';
                                        case 1:
                                            return 'Positive';
                                        case 2:
                                            return 'Neutral';
                                    }
                                }
                            }
                        }
                    ]
                }
            }
        });
    </script>

Answer 1

您只需对每个数据集使用相同的颜色数组即可做到这一点，例如：

var ctx = document.getElementById('myChart2').getContext('2d'),
  dateLabelArray = ['2019-06-10', '2019-06-09', '2019-06-08', '2019-06-07'],
  amArray = [2, 1, 2, 1],
  pmArray = [2, 1, 2, 1],
  colours = ['green', 'red', 'blue', 'yellow'],
  myChart2 = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: dateLabelArray,
      datasets: [{
          label: 'AM',
          backgroundColor: colours,
          borderColor: colours,
          borderWidth: 1.5,
          stack: 'Stack 0',
          data: amArray
        },
        {
          label: 'PM',
          backgroundColor: colours,
          borderColor: colours,
          borderWidth: 1.5,
          stack: 'Stack 1',
          data: pmArray
        }
      ]
    },
    options: {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true,
          ticks: {
            beginAtZero: true,
            callback: function(label, index, labels) {
              switch (label) {
                case 0:
                  return 'Challenged';
                case 1:
                  return 'Positive';
                case 2:
                  return 'Neutral';
              }
            }
          }
        }]
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart2"></canvas>