雷达Chartjs上的渐变背景

Question

我有一个雷达图。

我不知道如何在区域内放置径向渐变。 放置当前代码时，默认情况下仅将一种颜色作为背景色

当前代码：

let ctx = document.getElementById('chart-0').getContext("2d");
let gradient = ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000);

// Add colors
gradient.addColorStop(0.035, 'rgba(234, 25, 78, 1.000)');
gradient.addColorStop(0.225, 'rgba(0, 8, 249, 1.000)');
gradient.addColorStop(0.983, 'rgba(42, 255, 0, 1.000)');

let data = {
    backgroundColor: gradient,
    labels: labelData,
    datasets: [{
        borderColor: presets.red,
        data: [20,20,20,20,20],
        label: labeldata
    }]
};
const options = {
    maintainAspectRatio: true,
    spanGaps: false,
    scale: {
        pointLabels: {
            fontSize: 14
        }
    },
    elements: {
        line: {
            tension: 0.000001
        }
    },
    legend: {
        labels: {
            fontSize: 16
        }
    }
};

 chart = new Chart('chart-0', {
    type: 'radar',
    data: data,
    options: options
});

Answer 1

每个数据集还应包括具有分配的梯度值的backgroundColor属性。我已经根据您的代码创建了JSFiddle。