Chartjs 背景颜色多个数据集答案

【问题标题】：Chartjs background color multiple DatasetChartjs 背景颜色多个数据集
【发布时间】：2021-10-08 06:25:17
【问题描述】：

我有一个 Chartjs 脚本，例如：

<script type="text/javascript">
    var dataname = @Html.Raw(Json.Serialize(ViewBag.performancename));
    var dataquo = @Html.Raw(Json.Serialize(ViewBag.performancequo));
    var datapo = @Html.Raw(Json.Serialize(ViewBag.performancepo));
    var ctx = document.getElementById('canvasx5');

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataname,
            datasets: [{
                label: 'QUO',
                fill: true,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1,
                data: dataquo
            }
            ,
            {
                label: 'PO',
                fill: true,
                backgroundColor: [
                    'rgba(75, 192, 192, 0.8)'
                ],
                borderColor: [
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1,
                data: datapo
            }]
        },
        borderWidth: 1,
        options: {
            legend: {
                display: true,
            }
            ,
            scales: {
                xAxes: [{
                    stacked: false,
                    barPercentage: 0.8,
                    gridLines: {
                        offsetGridLines: true
                    }
                }],
                yAxes: [{
                    stacked: false,
                    ticks: {
                        beginAtZero: true,
                        stepSize: 2,
                        min: 0
                    }
                }]
            }
        }
    });
</script>

结果类似于：

每个var 的值是：

dataname: ['Arif','Choirul','Rexy']
dataquo: [2,2,1]
datapo: [0,0,3]

他们在Array 结果上。

为什么第二个和第三个标签的颜色不同？我的脚本有问题吗？需要帮助和建议。

谢谢。

【问题讨论】：

datapo、dataquo、dataname的值是什么
@Strella，请更新问题。请检查。谢谢。
backgroundColor: ['rgba(75, 192, 192, 0.8)', 'rgba(75, 192, 192, 0.8)', 'rgba(75, 192, 192, 0.8)'] , borderColor: [ 'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)' ], .... 仅用于测试。

标签： javascript jquery linq razor chart.js

【解决方案1】：

在 V2 中，Chart.js 不支持数组颜色的自动翻转，因此如果您的数组比数据长度更短，它将回退到剩余数据条目的默认颜色。

你有 3 种方法来修复它：

删除方括号，使其成为正常颜色（参见下面的示例）
提供与数据数组长度相同的颜色数组
更新到 V3，虽然有一些重大的制动变化，所以如果你想这样做，请阅读migration guide，以便正确更改代码

<body>
  <canvas id="canvasx5" width="100" height="100"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script type="text/javascript">
  var dataname = ['Arif', 'Choirul', 'Rexy'];
  var dataquo = [2, 2, 1];
  var datapo = [0, 0, 3];
  var ctx = document.getElementById('canvasx5');

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: dataname,
      datasets: [{
          label: 'QUO',
          fill: true,
          backgroundColor: 'rgba(255, 99, 132, 0.8)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1,
          data: dataquo
        },
        {
          label: 'PO',
          fill: true,
          backgroundColor: 'rgba(75, 192, 192, 0.8)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1,
          data: datapo
        }
      ]
    },
    borderWidth: 1,
    options: {
      legend: {
        display: true,
      },
      scales: {
        xAxes: [{
          stacked: false,
          barPercentage: 0.8,
          gridLines: {
            offsetGridLines: true
          }
        }],
        yAxes: [{
          stacked: false,
          ticks: {
            beginAtZero: true,
            stepSize: 2,
            min: 0
          }
        }]
      }
    }
  });
</script>

【讨论】：