本文详解如何在 Chart.js 4 中实现真正贴合数据极值的垂直线性渐变填充如折线图边框色解决 beginAtZero: true 下渐变脱离数据最低点的问题通过动态计算数据在坐标系中的归一化位置精准控制渐变起止点。 本文详解如何在 chart.js 4 中实现真正贴合数据极值的垂直线性渐变填充如折线图边框色解决 beginatzero: true 下渐变脱离数据最低点的问题通过动态计算数据在坐标系中的归一化位置精准控制渐变起止点。在 Chart.js 4 中使用 createLinearGradient() 实现颜色渐变时若直接以画布像素坐标如 chartArea.top/chartArea.bottom作为起点和终点渐变会严格按整个 Y 轴可视区域拉伸——这导致当启用 scales.y.beginAtZero: true 时即使数据最小值远高于 0例如 [27, 28, 30, 31, 32, 51]渐变仍从图表底部y0 对应位置开始造成视觉错位绿色本该映射到最小值 27却出现在空白区域。根本原因在于渐变需按数据值在 Y 轴数值空间中的相对位置缩放而非画布像素空间。解决方案是将数据最小值 dataMin 和最大值 dataMax 映射到 Y 轴刻度范围 [scaleMin, scaleMax] 内的归一化比例0–1 区间再传入 addColorStop()const scaleMin chart.scales[yScaleId].min;const scaleMax chart.scales[yScaleId].max;const dataMin Math.min(...context.dataset.data);const dataMax Math.max(...context.dataset.data);// 将数据极值转换为 [0, 1] 区间内的归一化分数const fracStart (dataMin - scaleMin) / (scaleMax - scaleMin);const fracEnd (dataMax - scaleMin) / (scaleMax - scaleMin);这样fracStart 即表示 dataMin 在 Y 轴数值范围中所处的“高度比例”可直接用于 addColorStop(fracStart, green)确保渐变色带严格对齐真实数据分布。以下是完整可运行示例适配 Chart.js 4 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能