如何消除Plotly.js多轨迹折线散点图中的白色间隙？

我用Plotly.js绘制水平时间轴的折线散点图，代码示例如下：

var trace1 = {
  x: [1726046102344, 1726051503518],
  y: [0, 0],
  mode: "lines",
  type: "scatter",
  line: {
    color: "black",
    width: 100
  },
};

var layout = {
  xaxis: { type: "date" },
  yaxis: { showticklabels: false },
  showlegend: false,
  height: 100,
  margin: { l: 20, r: 20, b: 40, t: 10, pad: 0 }
};

但当存在大量轨迹时，线条之间会出现白色间隙（未缩放时明显，缩放后间隙消失）。请问如何消除该白色间隙？

解决方法 #

1. 合并所有轨迹为单个Trace

多个独立Trace渲染时，浏览器的像素对齐精度问题会导致间隙。将所有线段的数据合并到一个Trace中，能从根本上避免这个问题：

// 示例：合并多段数据到单个Trace
var combinedTrace = {
  x: [
    1726046102344, 1726051503518, // 第一段线段的起止点
    1726051503518, 1726052000000, // 第二段线段的起止点（衔接前一段终点）
    1726052000000, 1726053000000  // 第三段线段的起止点
  ],
  y: [0, 0, 0, 0, 0, 0], // 所有点保持同一y值
  mode: "lines",
  type: "scatter",
  line: {
    color: "black",
    width: 100,
    shape: "hv" // 强制水平垂直线条，避免平滑渲染导致的偏移
  },
  connectgaps: false // 确保不会自动连接非连续的间隙（如果有的话）
};

2. 调整线条渲染参数

如果无法合并Trace，可通过以下参数优化：

• 给线条添加shape: "hv"：强制使用水平/垂直折线，避免默认平滑算法带来的像素偏移
• 设置smoothing: 0：关闭线条平滑，确保线段严格对齐
• 启用fill: "tozeroy"：用与线条同色的填充覆盖间隙区域，示例：

var trace1 = {
  // ... 原有配置
  line: {
    color: "black",
    width: 100,
    shape: "hv",
    smoothing: 0
  },
  fill: "tozeroy",
  fillcolor: "black"
};

3. 优化坐标轴精度

调整x轴的刻度计算方式，减少渲染时的浮点误差：

var layout = {
  xaxis: {
    type: "date",
    tickmode: "array",
    tickvals: [1726046102344, 1726051503518, 1726052000000], // 手动指定刻度点，对齐线段起止
    tickformat: "%H:%M"
  },
  // ... 原有布局配置
};

问题原因 #

大量独立Trace渲染时，每个线段的位置由浏览器单独计算，浮点精度误差会导致像素级偏移，形成视觉上的白色间隙；缩放后Plotly会重新计算坐标轴和线段位置，精度提升，间隙随之消失。

内容的提问来源于stack exchange，提问作者Анна Михайленко