Plotly.js散点图中矩形X轴偏移像素的问题及调整

问题原因 #

Plotly对时间轴默认会添加自动填充（padding），即在数据的起始和结束时间之外扩展少量范围，导致矩形的边缘（精确时间值）与数据点的视觉位置出现偏移。另外，若未明确指定x轴类型为日期，可能存在时间解析的细微偏差。

解决方案 #

1. 明确设置x轴类型为日期 #

在布局配置的xaxis中添加type: "date"，确保Plotly正确解析时间数据：

"xaxis": {
  "type": "date",
  // 保留原有其他配置
}

2. 手动设置x轴范围，消除自动填充 #

将x轴的range设置为数据中实际的时间范围，覆盖所有数据点的时间，这样轴的边缘会与首尾数据点对齐，矩形的边缘也会准确对应目标数据点：

"xaxis": {
  "type": "date",
  "range": ["2023-08-13T06:01:00.000Z", "2023-08-21T06:01:00.000Z"]
}

3. 调整矩形的时间范围（可选） #

如果需要矩形覆盖8月14日到8月16日的整个区间（而非仅对应两个点的精确时间），可以将x0设为8月13日和14日的时间中点，x1设为8月16日和17日的时间中点，这样矩形会刚好填充两个点之间的区域：

"shapes": [
  {
    "type": "rect",
    "xref": "x",
    "yref": "paper",
    "y0": 0,
    "y1": 1,
    "x0": "2023-08-13T18:01:00.000Z", // 8月13日和14日的时间中点
    "x1": "2023-08-16T18:01:00.000Z", // 8月16日和17日的时间中点
    "fillcolor": "#d3d3d3",
    "opacity": 0.3,
    "line": { "width": 0 }
  }
]

完整修改后的布局示例 #

{
  "title": {
    "text": "Time Series",
    "font": {
      "color": "#3dcd58",
      "family": "Nunito-Regular",
      "size": 18
    },
    "xanchor": "left",
    "x": 0
  },
  "font": {
    "color": "#333",
    "family": "Nunito-Regular"
  },
  "dragmode": "lasso",
  "autosize": false,
  "width": 425,
  "height": 400,
  "margin": {
    "l": 20,
    "r": 15,
    "b": 25,
    "t": 30
  },
  "plot_bgcolor": "#ffffff",
  "showlegend": true,
  "legend": {
    "x": 0,
    "bgcolor": "rgba(255,255,255,0.3)"
  },
  "xaxis": {
    "type": "date",
    "range": ["2023-08-13T06:01:00.000Z", "2023-08-21T06:01:00.000Z"]
  },
  "yaxis": {
    "showticklabels": false
  },
  "yaxis2": {
    "showticklabels": false,
    "overlaying": "y"
  },
  "yaxis3": {
    "showticklabels": false,
    "overlaying": "y"
  },
  "shapes": [
    {
      "type": "rect",
      "xref": "x",
      "yref": "paper",
      "y0": 0,
      "y1": 1,
      "x0": "2023-08-14T06:01:00.000Z",
      "x1": "2023-08-16T06:01:00.000Z",
      "fillcolor": "#d3d3d3",
      "opacity": 0.3,
      "line": { "width": 0 }
    }
  ]
}

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