Question

对于常规的条形图，您可以传递颜色数组；对于堆叠的组条形图，我根本无法找到一种方法来为它提供数组并为其提供颜色PER组。每天会有2条，而这两条条每天应有一种颜色，由我检索到的数组填充。

是否有办法对此进行调整？感觉它比实际要复杂。

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

在此照片示例中，我将使用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>

Chart.js中的堆叠组栏：我可以为每个堆叠组赋予唯一的颜色吗？

1 个答案: