Chart.js 4 中实现基于数据实际范围的垂直线性渐变

本文详解如何在 Chart.js 4 中动态计算 Y 轴数据极值与坐标系的映射关系，使 borderColor 渐变真正贴合数据最低/最高值位置，彻底解决 beginAtZero: true 下渐变偏离可视数据区域的问题。 本文详解如何在 chart.js 4 中动态计算 y 轴数据极值与坐标系的映射关系，使 `bordercolor` 渐变真正贴合数据最低/最高值位置，彻底解决 `beginatzero: true` 下渐变偏离可视数据区域的问题。在 Chart.js 4 中，为折线图边框（borderColor）添加垂直线性渐变是常见可视化需求。但许多开发者发现：当启用 scales.y.beginAtZero: true 后，若直接使用 chartArea.top 和 chartArea.bottom 构建 createLinearGradient(0, top, 0, bottom)，渐变会从整个坐标系底部（即 y=0 处）开始，而非从数据实际最小值对应的位置起始——导致低值区域颜色过浅、视觉表达失真。根本原因在于：渐变坐标需基于数据值在 Y 轴上的归一化位置（0–1 区间），而非画布像素坐标。Chart.js 的 chartArea 提供的是像素范围，而 Y 轴缩放（scale）负责将原始数据值映射到该像素区间。因此，正确做法是：获取当前数据集所绑定的 Y 轴 ID（如默认为 'y'）； 通过 chart.scales[yScaleId] 提取该轴的 min / max（即绘图范围）； 计算本数据集的 dataMin / dataMax； 将数据极值线性映射为归一化分数： const fracStart = (dataMin - scaleMin) / (scaleMax - scaleMin);const fracEnd = (dataMax - scaleMin) / (scaleMax - scaleMin);此时 fracStart 表示数据最小值在 Y 轴范围中所占的比例（例如 0.25），可直接用于 addColorStop()。以下是完整、健壮的实现代码（已适配 Chart.js 4.x）： Trenz AI驱动的社交电商营销平台，专为TikTok Shop设计