如何在Chart JS 3.3.2版本中创建带渐变填充的折线图

你原有代码的问题是 Chart.js 3.x 版本中，折线图数据集默认关闭填充功能，只需要补充对应配置即可生效。

完整可运行代码 #

HTML 部分 #

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>

JS 部分 #

var ctx = document.getElementById('chart').getContext('2d');
// 渐变高度动态获取画布高度，适配性更强，不需要硬编码固定数值
var chartHeight = ctx.canvas.height;
var gradient = ctx.createLinearGradient(0, 0, 0, chartHeight);
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],
            // 新增这行，开启折线下方区域填充
            fill: true
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        tension: 0.3
    }
});

核心修改点说明 #

• 给对应数据集添加fill: true属性，Chart.js 3.x 中线图填充默认关闭，这是和旧版本最核心的差异
• 渐变创建的高度改为动态读取画布高度，避免画布尺寸调整后渐变效果错位

内容的提问来源于stack exchange，提问作者itsisaac19