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

Question

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

这就是函数的样子：

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