Chart.js 4 中实现基于数据极值的垂直线性渐变填充

本文详解如何在 Chart.js 4 中动态计算 Y 轴数据范围，使 createLinearGradient 的起止位置精准匹配实际数据最小值与最大值，彻底解决 beginAtZero: true 下渐变脱离数据可视区域的问题。 本文详解如何在 chart.js 4 中动态计算 y 轴数据范围，使 `createlineargradient` 的起止位置精准匹配实际数据最小值与最大值，彻底解决 `beginatzero: true` 下渐变脱离数据可视区域的问题。在 Chart.js 4 中，为折线图或面积图添加垂直线性渐变（如绿→黄→红）是增强可视化表现力的常用技巧。但开发者常遇到一个关键问题：当启用 scales.y.beginAtZero: true 时，Y 轴会强制从 0 开始，而图表默认的渐变（如 ctx.createLinearGradient(0, bottom, 0, top)）却始终覆盖整个绘图区域（chartArea），导致渐变颜色分布与真实数据值脱节------例如最低数据点位于 Y=27，但渐变"绿色"仍被渲染在 Y=0 处，视觉上无法反映数据的实际分布区间。根本原因在于：渐变坐标必须映射到数据值域，而非像素坐标域。createLinearGradient(y1, y2) 接收的是画布像素坐标，但我们需要将数据值（如 dataMin = 27, dataMax = 51）按比例转换为 0--1 区间的归一化分数（fraction），再传入 addColorStop(frac, color)。? 正确实现逻辑获取 Y 轴尺度信息：通过 context.chart.scales[yScaleId] 访问当前数据集绑定的 Y 轴对象，读取其 min 和 max（即轴显示范围）；提取数据极值：使用 Math.min/max(...context.dataset.data) 获取该数据集的实际最小/最大值；线性归一化：将数据值映射到 [0, 1] 区间： 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能