基于Plotly绘制可交互对齐晶圆图 解决标记不对齐及交互丢失问题

方案1：修复px.scatter的对齐问题（适合正方形芯片场景） #

• 首先强制绑定坐标轴等比例缩放，避免画布拉伸导致坐标比例变形：

  fig.update_yaxes(scaleanchor="x", scaleratio=1)
  

• 动态计算marker大小：先获取x轴的总跨度、绘图区的像素宽度，单颗芯片的像素尺寸 = 绘图区宽度 / x轴方向的芯片总数，将计算结果赋值给marker_size参数即可实现标记和网格完全对齐。

方案2：用px.imshow实现任意宽高比的矩形芯片（推荐，适配所有场景） #

这是绘制晶圆图的最优方案，天生对齐且保留全交互能力：

• 将晶圆的芯片坐标转换为二维矩阵，矩阵对应位置存bin分类值，晶圆边缘空缺位置赋值为NaN
• 调用px.imshow()绘制矩阵，通过aspect参数直接设置芯片的宽高比，不需要局限为正方形
• 可通过custom_data和hovertemplate自定义悬停提示内容，同时保留动态图例点击显隐、缩放平移等所有交互功能，性能远高于shape方案。

补充说明 #

如果必须使用自定义shape绘制特殊形状的芯片，也可以通过给shape绑定自定义hover数据、设置全局hovermode实现交互，但芯片数量超过1000时性能会明显下降，非必要不推荐。

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