Plotly中如何让散点图与分组柱状图对应分组对齐

问题原因 #

分组柱状图中，同列的不同vial柱子会被分配带偏移的x坐标。直接用列名（如"A"、"B"）作为散点的x值时，Plotly会将散点放置在该列分组的中心位置（此例中5个vial的中心是vial3），导致散点偏离目标位置。

解决方法 #

通过提取vial1柱子的实际x坐标，将散点精准定位到对应位置：

import pandas as pd
import plotly.express as px

df = pd.DataFrame(
    [[1,2,3,4,5], [10, 30, 20, 60, 30], [3,3,4,5,8],[9, 1,2,3,4], [1,1,2,2,2]],
    columns=["A", "B", "C", "D", "E"],
    index=["vial1", "vial2", "vial3", "vial4", "vial5"]
)

# 生成分组柱状图
fig = px.bar(df.T, barmode="group")

# 提取vial1分组各柱子的实际x坐标
vial1_x_coords = None
for trace in fig.data:
    if trace.name == "vial1":
        vial1_x_coords = trace.x
        break

# 建立列名到vial1对应x坐标的映射
col_x_map = dict(zip(df.columns, vial1_x_coords))
# 定义散点的x（对应vial1的A、A、B位置）和y值
scatter_x = [col_x_map["A"], col_x_map["A"], col_x_map["B"]]
scatter_y = [10, 20, 30]

# 添加散点并绑定到vial1的对齐组
fig.add_scatter(
    x=scatter_x,
    y=scatter_y,
    mode="markers",
    alignmentgroup="vial1",
    name="自定义散点"
)

fig.show()

关键说明 #

1. 提取vial1的x坐标：遍历柱状图的fig.data，找到名称为"vial1"的轨迹，其x属性存储了该分组每个柱子的实际偏移坐标。
2. 映射列名到坐标：通过字典将列名（A-E）与对应vial1柱子的坐标绑定，确保散点定位准确。
3. alignmentgroup绑定：保留alignmentgroup="vial1"，确保图表缩放或调整时，散点与vial1柱子始终保持对齐。

内容的提问来源于stack exchange，提问作者Václav Bočan