Chart.js 中的堆叠组栏：我可以给每个堆叠组一个唯一的颜色吗？答案

【问题标题】：Stacked Group Bar from Chart.js : Can I give each stack group a unique color?Chart.js 中的堆叠组栏：我可以给每个堆叠组一个唯一的颜色吗？
【发布时间】：2019-06-17 16:22:47
【问题描述】：

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

有没有办法对此进行调整以使其正常工作？感觉它比实际应该的要复杂。

E.G 第 1 天组为绿色，第 2 天组为红色，第 3 天为蓝色。等根据每天注册的内容进行颜色编码。

https://imgur.com/a/HLb4YL2

在这个照片示例中，我有 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>

【问题讨论】：

标签： javascript php html css chart.js

【解决方案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>

【讨论】：