我想知道如何在Chart JS 版本 3.3.2中创建渐变折线图填充,如下所示:
这个StackOverflow 问题在近 6 年前就已得到解答。2021 年3.3.2版本的解决方案是什么?
我尝试了旧的解决方案,但没有效果:
代码:
var ctx = document.getElementById('chart').getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(224, 195, 155, 1)');
gradient.addColorStop(1, 'rgba(100, 100, 0,0)');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
backgroundColor: gradient,
label: 'Numbers',
data: [12, 19, 3, 5, 2, 3],
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
tension: 0.3 …Run Code Online (Sandbox Code Playgroud)