dygraph 2.1.0双数据集折线图线条断连问题求助

问题核心根因 #

该问题并非浏览器兼容性导致，本质是dygraph 2.1.0版本缺失值处理与跨数据集渲染逻辑的设计冲突：

• 单数据集场景下，渲染逻辑仅处理单条线的坐标遍历、缺失值跳过，不存在图层覆盖冲突，因此线条渲染流畅正常。
• 双数据集场景下，引擎会按照配置的图层顺序逐序列绘制，后续绘制的上层序列会覆盖下层序列的像素区域；结合缺失值的线段跳过规则，处于下层的序列在穿过上层序列的交叉坐标时，会被直接裁切掉对应线段，视觉上就表现为相邻有效数据点之间的连接丢失。

dygraph 2.1.0版本的默认渲染逻辑为：逐像素遍历画布坐标，上层绘制的序列会直接覆盖下层序列的像素内容，不会做跨序列的连线避让计算。

触发场景对应逻辑 #

结合提供的测试数据可复现该逻辑：

1. 测试数据的两个有效数值列并未完全对齐时间轴：
   • 第一组数值（蓝色序列）的有效采样点对应时间戳为：2021-03-02 19:44:08、2021-03-02 19:44:09、2021-03-02 19:44:10
   • 第二组数值（绿色序列）的有效采样点对应时间戳为：2021-03-02 19:44:09、2021-03-02 19:44:11、2021-03-02 19:44:12
2. 当绿色序列的首个有效点位置左移到与蓝色序列中间点的坐标重合时，蓝色序列处于上层渲染层级，会直接覆盖绿色序列从该点向后延伸的第一段连线区域，最终表现为两个相邻绿色有效点之间没有线条连接。

可行的修复方案 #

• 调整序列渲染层级：在dygraph初始化的series配置中，为需要保证连线完整的序列设置更高的zIndex参数，让该序列处于图层上层，避免被其他序列裁切遮挡。
• 开启断点连线条配置：全局或针对单序列开启connectSeparatedPoints: true参数，强制引擎跳过缺失值坐标位置，直接连接同序列下相邻的有效数据点，避免交叉位置的裁切中断连线。
• 统一坐标网格：将数据中空缺的数值位置补充明确的空值标记，不要直接留空逗号后的内容，让引擎为所有序列对齐统一的时间坐标网格，减少跨点插值的逻辑冲突。

内容的提问来源于stack exchange，提问作者Petra