Chart.js多数据集柱状图标签颜色异常，请问代码存在什么问题？

问题原因 #

你配置backgroundColor和borderColor时错误使用了数组类型，导致颜色不匹配。
当你给单个数据集的颜色属性传数组时，Chart.js会认为你要给这个数据集下的每个柱子单独指定颜色，会按柱子索引取数组对应位置的颜色值。你数组里只有1个颜色值，超出索引的柱子就会自动调用Chart.js默认的全局色板，就会出现前一个柱子颜色匹配配置，后续柱子颜色不对的问题。

修复方案 #

把两个数据集的backgroundColor、borderColor属性从数组改成直接传字符串即可，修改后的代码如下：

<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>

额外说明 #

如果你确实需要给同一个数据集下的不同柱子设置不同颜色，才需要用数组传值，示例如下：

backgroundColor: [
  'rgba(255, 99, 132, 0.8)', // 第一个柱子颜色
  'rgba(54, 162, 235, 0.8)', // 第二个柱子颜色
  'rgba(255, 206, 86, 0.8)'  // 第三个柱子颜色
]

内容的提问来源于stack exchange，提问作者Haminteu