ApexCharts：解决 datetime 类型 X 轴下渐变填充颜色错位问题

在 ApexCharts 中，如果X轴类型设置为 datetime，并且使用了渐变填充，当X轴标签数量较多时，可能会出现颜色与数据对不上的问题。这是因为默认情况下，渐变是根据数据点的索引进行插值的，而不是根据X轴的实际时间距离。本教程将介绍两种方法来解决这个问题，确保颜色在 datetime 类型的 X 轴上正确对齐。

方案一：基于时间戳计算渐变偏移量

核心思想是根据每个数据点的时间戳来计算渐变色的偏移量，而不是依赖数据点的索引。

1. 获取起始和结束时间戳： 首先，我们需要获取数据集中最早和最晚的时间戳。这可以通过解析数据集中第一个和最后一个数据点的 X 轴值来实现。

   const tStart = Date.parse(JsonData?.[0]?.x?.replace(/\s/g, ""));
   const tEnd = Date.parse(JsonData?.[JsonData?.length - 1]?.x?.replace(/\s/g, ""));
   const dt = tEnd - tStart;

   这里，Date.parse() 函数用于将日期字符串转换为 UNIX 时间戳。 replace(/\s/g, "") 用于移除日期字符串中的空格，使其符合 ISO 8601 格式。

2. 计算每个数据点的偏移量： 接下来，遍历数据集，计算每个数据点相对于起始时间的偏移量，并将其转换为百分比。

   const colorStops = JsonData.map((e, index) => {
       let color = "black";
       for (let j = 0; j < rangeValue?.length; j++) {
           if (e.y <= rangeValue[j].Range_End_Value) {
               color = rangeValue[j].Range_color;
               break;
           }
       }
       const t = Date.parse(e.x.replace(/\s/g, ""));
   
       return {
           offset: ((t - tStart) / dt) * 100,
           color,
           opacity: 0.5
       };
   });

   在上面的代码中，((t - tStart) / dt) * 100 计算了当前数据点的时间戳相对于总时间跨度的百分比，这个百分比就是渐变色的偏移量。

3. 应用渐变色： 将计算得到的 colorStops 数组应用到 ApexCharts 的配置中。

示例代码:

完整的示例代码可以在 CodeSandbox 中找到：https://www.php.cn/link/abdcaa8e62fa9a0e2e86a0564d11bde4

注意事项：

超级简历WonderCV

免费求职简历模版下载制作，应届生职场人必备简历制作神器

下载

• 确保日期字符串的格式可以被 Date.parse() 正确解析。
• 这种方法适用于数据点在时间轴上不均匀分布的情况。

方案二：使用垂直渐变

另一种解决方案是使用垂直渐变，将颜色映射到 Y 轴上。

1. 确定 Y 轴的最大值： 首先，需要确定 Y 轴的最大值，这将决定渐变色的范围。

   const maxY = 450;

2. 计算渐变偏移量： 根据预设的颜色分界点，计算对应的 Y 轴高度的百分比，作为渐变色的偏移量。

   colorStops: [
       {
           offset: (1 - 220 / maxY) * 100,
           color: "red",
           opacity: 0.5
       },
       {
           offset: (1 - 220 / maxY) * 100,
           color: "yellow",
           opacity: 0.5
       },
       {
           offset: (1 - 100 / maxY) * 100,
           color: "yellow",
           opacity: 0.5
       },
       {
           offset: (1 - 100 / maxY) * 100,
           color: "green",
           opacity: 0.5
       }
   ]

   这里，(1 - 220 / maxY) * 100 计算了 Y 轴上 220 对应的高度占总高度的百分比，由于垂直渐变是从顶部开始的，所以需要用 1 减去这个百分比。

3. 配置 ApexCharts： 将 fill.type 设置为 gradient，并将 gradient.gradientToColors 设置为 undefined，并设置正确的 colorStops。

示例代码：

完整的示例代码可以在 CodeSandbox 中找到：https://www.php.cn/link/6789a028871524be3a84e0c3490b4177

注意事项：

• 这种方法需要预先知道 Y 轴的最大值。
• 颜色分界点的设置需要从顶部向下考虑。

总结

本教程提供了两种解决 ApexCharts 中 datetime 类型 X 轴下渐变填充颜色错位问题的方法。第一种方法通过精确计算时间戳来控制渐变，适用于数据点在时间轴上不均匀分布的情况；第二种方法利用垂直渐变，将问题转化为 Y 轴上的颜色控制，适用于需要根据 Y 轴数值进行颜色区分的情况。 选择哪种方法取决于具体的应用场景和数据特性。 掌握这些方法可以帮助你更好地利用 ApexCharts 创建美观且准确的图表。