jquery - 动态填充 Chart.js 图表上的颜色

Question

我有一个使用 Chart.js 的 vue 应用程序。我正在尝试使用行单击事件从表中的数据动态填充图表。我的数据显示在图表中，但我正在尝试弄清楚如何将随机颜色放入其中。有什么建议吗？

该函数如下所示:

var ctx = document.getElementById("myDoughnut");
var myDoughnut = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: this.getAnalyticRow[0].rowNames,
        datasets: [{
            data: this.getAnalyticRow[0].rowData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 2,
        }]
    },
    options: {
        responsive: true,
        defaultFontColor: '#ffffff',
    }

这是图表:

Answer 1

如果您以这种方式设置背景颜色，您将设置前 5 个元素的背景颜色，因为它是颜色数组:

backgroundColor: [
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)'
        ],

要解决此问题，您必须仅插入一种背景颜色，但不能插入字符串数组中。示例:

backgroundColor: 'rgba(255, 99, 132, 0.6)'