如何在公共 x 轴上显示标签，同时在所有子图上都有尖峰线

Question

我正在尝试垂直堆叠不同的图形，所有图形都有一个共同的 x 轴。当我将鼠标悬停在图表上时，我希望有一条尖峰线遍历所有子图，并且理想情况下使悬停“统一”并显示所有子图的数据。但根据 github issues，悬停不在路线图上。 https://github.com/plotly/plotly.js/issues/4755

我有以下内容：

#!/usr/local/bin/python3

import plotly.graph_objects as go
from plotly.subplots import make_subplots

reference_distance = [0, 1, 2, 3, 4]
compare_distance = [0, 1.5, 2.5, 3.5, 4.5]
reference_time = [0, 1, 3, 5, 6]
reference_speed = [100, 200, 300, 400, 500]
compare_speed = [50, 100, 150, 200, 250]

delta_t = [-1, -2, -3, -4, -5]

base = [0] * len(delta_t)

fig = go.Figure()

fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0)

fig.add_trace(
    go.Scatter(
        x=compare_distance,
        y=base,
        name='Reference Delta',
        hoverinfo='skip'
    ),
    row=1,
    col=1
)

fig.add_trace(
    go.Scatter(
        x=compare_distance,
        y=delta_t,
        name='Compare Delta',
        hovertemplate='Delta: %{y}<extra></extra>'
    ),
    row=1,
    col=1
)

fig.add_trace(
    go.Scatter(
        x=reference_distance,
        y=reference_speed,
        name='Reference',
        meta='Reference',
        hovertemplate='<b>%{meta}</b><br>Distance: %{x}<br>Speed: %{y}<extra></extra>'
    ),
    row=2,
    col=1
)

fig.add_trace(
    go.Scatter(
        x=compare_distance,
        y=compare_speed,
        name='Comapre',
        meta='Comapre',
        hovertemplate='<b>%{meta}</b><br>Distance: %{x}<br>Speed: %{y}<extra></extra>'
    ),
    row=2,
    col=1
)

fig.update_traces(mode="lines", xaxis="x")

fig.update_xaxes(
    showspikes=True,
    spikecolor="grey",
    spikesnap="cursor",
    spikemode="across",
    hoverformat="none",
)
fig.update_yaxes(title_text="Delta (Seconds)", row=1, col=1)
fig.update_yaxes(title_text="Speed (MPH)", row=2, col=1)
fig.update_layout(
    spikedistance=10000,
    hoverdistance=10000,
    hovermode="x unified",
    title="Delta T and Speed",
    xaxis_title="Distance (Miles)",
    legend_title="Runs"
)

fig.show()

我无法让尖峰线覆盖两个子图，直到我将

xaxis="x"

（

xaxis="x1"

似乎具有相同的行为）放入

update_traces

调用中。我无法从文档中理解这到底是做什么的，但它确实使尖峰线覆盖了所有子图。一个缺点是它从 x 轴上删除了刻度/标签，我无法将其恢复。如何获得刻度/标签，同时还具有

xaxis="x"

或覆盖两个图的尖峰线？

没有

xaxis="x"

：

与

xaxis="x"

：

Answer 1

这确实是我目前能想到的唯一解决方法，但可能还有更好的方法。

我们将使用

text

参数来设置悬停时的数据

fig.add_trace(
    go.Scatter(
        x=compare_distance,
        y=delta_t,
        name='Compare Delta',
        text = text_data, # use text here
        hoverinfo='text' # set hoverinfo to text so that is all that is diplayed
    ),
    row=1,
    col=1
)

由于第 2 行有两个图，我们需要将其中一个设置为

hoverinfo='skip'

，否则数据将重复。

我认为我为

z = list(zip(delta_t, reference_distance, reference_speed, compare_distance, compare_speed))

设置了正确的标签，我在下面的脚本中将其称为

text_data

，但您可能需要仔细检查。

import plotly.graph_objects as go
from plotly.subplots import make_subplots

reference_distance = [0, 1, 2, 3, 4]
compare_distance = [0, 1.5, 2.5, 3.5, 4.5]
reference_time = [0, 1, 3, 5, 6]
reference_speed = [100, 200, 300, 400, 500]
compare_speed = [50, 100, 150, 200, 250]

# zip the data together that we want to use on hover
z = list(zip(delta_t, reference_distance, reference_speed, compare_distance, compare_speed))
# Create the hover data for all plots
text_data = [f'Delta: {d}<br><br><b>Refernce</b><br>Distance: {rd}<br>Speed: {rs}<br><br><b>Compare</b><br>Distance: {cd}<br>Speed: {cs}' 
             for d, rd, rs, cd, cs in  z]

delta_t = [-1, -2, -3, -4, -5]

base = [0] * len(delta_t)

fig = go.Figure()

fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0.05)

fig.add_trace(
    go.Scatter(
        x=compare_distance,
        y=base,
        name='Reference Delta',
        hoverinfo='skip'
    ),
    row=1,
    col=1
)

fig.add_trace(
    go.Scatter(
        x=compare_distance,
        y=delta_t,
        name='Compare Delta',
        text = text_data, 
        hoverinfo='text'
    ),
    row=1,
    col=1
)

fig.add_trace(
    go.Scatter(
        x=reference_distance,
        y=reference_speed,
        name='Reference',
        meta='Reference',
        text=text_data,
        hoverinfo='text'
        # hovertemplate='<b>%{meta}</b><br>Distance: %{x}<br>Speed: %{y}<extra></extra>'
    ),
    row=2,
    col=1
)

fig.add_trace(
    go.Scatter(
        x=compare_distance,
        y=compare_speed,
        name='Comapre',
        meta='Comapre',
        hoverinfo='skip' # skip this or the data is displayed twice
        # hovertemplate='<b>%{meta}</b><br>Distance: %{x}<br>Speed: %{y}<extra></extra>'
    ),
    row=2,
    col=1
)

fig.update_traces(mode="lines", xaxis="x1")

fig.update_xaxes(
    showspikes=True,
    spikecolor="grey",
    spikesnap="cursor",
    spikemode="across",
    hoverformat="none",
)
fig.update_yaxes(title_text="Delta (Seconds)", row=1, col=1)
fig.update_yaxes(title_text="Speed (MPH)", row=2, col=1)
fig.update_layout(
    spikedistance=10000,
    hoverdistance=10000,
    hovermode="x unified",
    title="Delta T and Speed",
    xaxis_title="Distance (Miles)",
    legend_title="Runs"
)

fig.show()