I am wondering how to create a gradient line chart fill in Chart JS version 3.3.2 like this:
This StackOverflow问题 https://stackoverflow.com/questions/29447579/chart-js-add-gradient-instead-of-solid-color-implementing-solution大约 6 年前就得到了回答。 2021年的版本有什么解决方案3.3.2 https://www.chartjs.org/docs/latest/?
我尝试了旧的解决方案，但没有成功：
Code:
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
}
});<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>JSFiddle http://jsfiddle.net/ktuefyw9/17/
你几乎就在那里，在 v3 中默认折线图不填充，所以你需要设置fill: true
Example
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',
fill: true,
data: [12, 19, 3, 5, 2, 3],
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
tension: 0.3
}
});<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>