ChartJS折线图：实现从Y轴负最小值处渲染背景（仿零值效果）

核心思路 #

通过Canvas线性渐变API创建渐变对象，绑定到折线图的填充区域或图表背景，实现预期的渐变渲染效果。

实现步骤 #

1. 创建渐变对象

先获取图表Canvas的上下文，用createLinearGradient定义渐变方向和颜色节点：

const ctx = document.getElementById('your-chart-id').getContext('2d');
// 定义从下到上的渐变（参数：起始x, 起始y, 结束x, 结束y）
const fillGradient = ctx.createLinearGradient(0, ctx.canvas.height, 0, 0);
// 添加颜色节点，0对应渐变起点，1对应终点
fillGradient.addColorStop(0, 'rgba(54, 162, 235, 0)'); // 底部完全透明
fillGradient.addColorStop(1, 'rgba(54, 162, 235, 0.3)'); // 顶部半透明蓝色

2. 配置折线图数据集

在数据集里开启填充，并将渐变对象赋值给backgroundColor：

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['周一', '周二', '周三', '周四', '周五'],
    datasets: [{
      label: '业务数据',
      data: [28, 45, 32, 50, 38],
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 2,
      tension: 0.4, // 让折线更平滑
      fill: true, // 开启折线下方填充
      backgroundColor: fillGradient // 绑定渐变背景
    }]
  },
  options: {
    scales: {
      y: { beginAtZero: true }
    }
  }
});

3. 可选：给整个图表加背景渐变

如果需要图表整个区域的渐变背景（而非折线填充），可以通过自定义插件实现：

const chart = new Chart(ctx, {
  type: 'line',
  data: { /* 你的数据 */ },
  options: { /* 你的配置 */ },
  plugins: [{
    beforeDraw: (chart) => {
      const bgCtx = chart.canvas.getContext('2d');
      const bgGradient = bgCtx.createLinearGradient(0, 0, 0, chart.canvas.height);
      bgGradient.addColorStop(0, '#f0f8ff');
      bgGradient.addColorStop(1, '#ffffff');
      bgCtx.fillStyle = bgGradient;
      bgCtx.fillRect(0, 0, chart.canvas.width, chart.canvas.height);
    }
  }]
});

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