ApexCharts 时间序列图颜色对齐问题及解决方案

在使用 ApexCharts 创建带有渐变填充的时间序列图时，当X轴为 datetime 类型且存在多个标签时，可能会出现颜色对齐错位的问题。本文将深入探讨此问题的原因，并提供两种有效的解决方案，确保颜色与数据正确对应，提升图表的可读性和准确性。

问题分析

当X轴类型设置为 datetime 时，ApexCharts 会根据时间戳来定位数据点。如果直接使用数据点的索引来插值渐变颜色，当数据点在时间轴上不是均匀分布时，就会导致颜色与实际数据不匹配。例如，一周内每天都有数据，但周末数据缺失，直接使用索引插值会导致周一到周五的颜色显示不正确。

解决方案一：基于时间戳插值颜色

该方案的核心在于，根据每个数据点实际的时间戳，而非索引，来计算颜色在渐变中的位置。

1. 获取起始和结束时间戳： 首先，需要获取数据集中最早和最晚的时间戳。可以使用 Date.parse() 函数将日期字符串转换为 UNIX 时间戳。由于日期字符串可能包含空格，需要先使用 replace(/\s/g, "") 移除空格。

   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;

2. 计算每个数据点的颜色偏移量： 对于每个数据点，计算其时间戳与起始时间戳的差值，然后除以总时间范围，得到一个 0 到 1 之间的比例，再乘以 100 即可得到颜色偏移量。

   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
       };
   });

   在上述代码中，我们首先根据 y 值确定颜色，然后根据时间戳计算偏移量。

解决方案二：使用垂直渐变

另一种方案是使用垂直渐变，并根据Y轴的值来定义颜色停止点。

美图AI开放平台

美图推出的AI人脸图像处理平台

下载

1. 设置Y轴的最大值： 确定Y轴的最大值，这对于计算颜色停止点至关重要。

   const maxY = 450; // 假设 Y 轴最大值为 450

2. 计算颜色停止点： 根据预设的颜色分界值，计算颜色停止点在垂直方向上的偏移量。偏移量的计算公式为 (1 - 分界值 / maxY) * 100。

   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
       }
   ]

   注意，颜色停止点需要从上到下定义。

代码示例

以下是一个使用时间戳插值颜色方案的示例：

const JsonData = [
  { x: "2023-10-26 10:00", y: 50 },
  { x: "2023-10-27 10:00", y: 150 },
  { x: "2023-10-28 10:00", y: 300 },
  { x: "2023-10-29 10:00", y: 400 },
  { x: "2023-10-30 10:00", y: 200 },
];

const rangeValue = [
  { Range_End_Value: 100, Range_color: "green" },
  { Range_End_Value: 220, Range_color: "yellow" },
  { Range_End_Value: 450, Range_color: "red" },
];

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;

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
    };
});

const options = {
  chart: {
    type: 'line',
    animations: {
      enabled: false
    }
  },
  series: [{
    name: 'series-1',
    data: JsonData
  }],
  xaxis: {
    type: 'datetime'
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      colorStops: colorStops
    }
  },
};

const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

注意事项

• 在使用 Date.parse() 函数时，确保日期字符串的格式正确。
• 在计算垂直渐变的颜色停止点时，需要准确设置Y轴的最大值。
• 根据实际需求选择合适的解决方案。如果数据点在时间轴上分布不均匀，建议使用时间戳插值颜色方案。

总结

本文介绍了在使用 ApexCharts 创建带有渐变填充的时间序列图时，解决颜色对齐问题的两种方法。通过基于时间戳插值颜色或使用垂直渐变，可以确保颜色与数据正确对应，提高图表的可读性和准确性。选择哪种方案取决于具体的数据特征和需求。在实际应用中，请根据具体情况选择合适的解决方案。