Plotly：如何仅将垂直和水平线（十字准线）显示为悬停信息？

Posted 2023-02-16

【中文标题】Plotly：如何仅将垂直和水平线（十字准线）显示为悬停信息？

【英文标题】：Plotly: How to only show vertical and horizontal line (crosshair) as hoverinfo?

【发布时间】：2020-08-30 19:46:16

【问题描述】：

我想在 plotly dash 中绘制一个带有两个子图的图表。我的整个图表如下所示：

import pandas as pd
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from plotly.subplots import make_subplots
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv').iloc[:60]
fig = make_subplots(rows=2, cols=1, row_heights=[0.8, 0.2], vertical_spacing=0)

fig.add_trace(go.Candlestick(open=df['AAPL.Open'], high=df['AAPL.High'], low=df['AAPL.Low'], close=df['AAPL.Close'],
                             increasing_line_color='#0384fc', decreasing_line_color='#e8482c', name='AAPL'), row=1, col=1)

fig.add_trace(go.Scatter(y=np.random.randint(20, 40, len(df)), marker_color='#fae823', name='VO', hovertemplate=[]), row=2, col=1)

fig.update_layout('plot_bgcolor': "#21201f", 'paper_bgcolor': "#21201f", 'legend_orientation': "h",
                  legend=dict(y=1, x=0),
                  font=dict(color='#dedddc'), dragmode='pan', hovermode='x unified',
                  margin=dict(b=20, t=0, l=0, r=40))

fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False,
                 showspikes=True, spikemode='across', spikesnap='data', showline=False, spikedash='solid')

fig.update_yaxes(showgrid=False, zeroline=False)
fig.update_traces(xaxis='x', hoverinfo='none')

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.Div(dcc.Graph(id='chart', figure=fig, config='displayModeBar': False))])

if __name__ == '__main__':
    app.run_server(debug=True, dev_tools_ui=False, dev_tools_props_check=False)

我需要的是交易图表中常见的所谓十字准线。基本上它由连接到 x 和 y 轴并随光标移动的两条线组成。这是 tradingview.com 图表的屏幕截图：

但是在我的图表中，当光标位于烛台上时会出现一个小图标：

到目前为止，我发现当光标在散点图上时，图标消失并且工作正常。我认为这是因为我在散点图中设置了hovertemplate=[]。我不能在烛台图中这样做，因为它没有这样的参数。而且，这个图标只有在我设置hovermode='x unified'时才会出现。如果我将其设置为 x，则不会出现小图标。但我需要它与我展示的 tradingview.com 示例完全相同。 有没有办法复制那个十字准线？

更新 1：

我试过fig.update_layout(hoverdistance=0)。但问题是，当光标不在烛台上时，十字准线就不对了。我截了两张截图：第一张来自 tradingview.com 图表，第二张来自我的代码，hoverdistance 设置为 0. 可以看出，当光标不在烛台上时，在第一个屏幕截图中，十字准线仍然正确。但是，在第二个屏幕截图中，它无法正常工作。仅当光标仅在烛台上时才有效。 我只想复制tradingview.com 十字准线。不多也不少。

更新 2：

我认为答案可能在这些plotly docs 上。我目前正在研究它。请分享有关此更新的您的 cmets。

【问题讨论】：

仅供参考，看起来from plotly.subplots import make_subplots 不见了

@ jayveesa 和阿米尔。这正是这里的事情应该是这样的；一个经过充分研究的好问题，快速反馈和通过协作获得的好答案！甚至没有关于谁得到什么的最轻微的争论。点给大家=)

很高兴能帮上忙，工作很有趣 :)

@vestland 你能更新你的答案吗？我编辑了它，但它说需要时间才能获得批准。只需在fig.update_xaxes 和fig.update_yaxes 中添加spikesnap =' cursor'。当前在两个更新轴中都设置为data。然后我批准它并给你一个巨大的赏金=）

@vestland 连续截取几张截图，然后将您的照片上传到ezgif.com/maker。它会照顾它。保存 gif，然后将其上传到 SO。

【参考方案1】：

应该这样做：

fig.update_layout(hoverdistance=0)

并为 xaxes 和 yaxes 设置 spikesnap='cursor'。

这些小调整将保持十字准线完好无损，并移除一直困扰您的小图标。

来自the docs：

剧情：

悬停距离

设置查找数据的默认距离（以像素为单位） 添加悬停标签（-1 表示不截止，0 表示不查找数据）。 这只是悬停在点状物体上的真实距离，例如 散点。对于类似区域的对象（条形、散点填充等） 悬停在区域内部和外部关闭，但这些对象将 在发生冲突时不要取代悬停在点状物体上。

完整代码：（但没有破折号元素）

import pandas as pd
import numpy as np
import plotly.graph_objs as go
from plotly.subplots import make_subplots

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv').iloc[:60]
fig = make_subplots(rows=2, cols=1, row_heights=[0.8, 0.2], vertical_spacing=0)

fig.add_trace(go.Candlestick(open=df['AAPL.Open'], high=df['AAPL.High'], low=df['AAPL.Low'], close=df['AAPL.Close'],
                             increasing_line_color='#0384fc', decreasing_line_color='#e8482c', name='AAPL'), row=1, col=1)

fig.add_trace(go.Scatter(y=np.random.randint(20, 40, len(df)), marker_color='#fae823', name='VO', hovertemplate=[]), row=2, col=1)

fig.update_layout('plot_bgcolor': "#21201f", 'paper_bgcolor': "#21201f", 'legend_orientation': "h",
                  legend=dict(y=1, x=0),
                  font=dict(color='#dedddc'), dragmode='pan', hovermode='x unified',
                  margin=dict(b=20, t=0, l=0, r=40))

fig.update_yaxes(showgrid=False, zeroline=False, showticklabels=False,
                 showspikes=True, spikemode='across', spikesnap='cursor', showline=False, spikedash='solid')

fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False,
                 showspikes=True, spikemode='across', spikesnap='cursor', showline=False, spikedash='solid')

fig.update_layout(hoverdistance=0)

fig.update_traces(xaxis='x', hoverinfo='none')
fig.show()

【讨论】：

Nice1，你也可以用spikethickness调整spikedash的粗细

@Christos 谢谢！并感谢您的信息！其实没试过。

【参考方案2】：

如果您设置了hovermode='x'，那么您可以像这样格式化style of the spike line：

fig.update_xaxes(spikecolor="grey",spikethickness=1)

更新： spikesnap='cursor' 会让你更接近，但不完全适用于烛台。

fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False,
                 showspikes=True, spikemode='across', spikesnap='cursor', showline=False,
                 spikecolor="grey",spikethickness=1, spikedash='solid')
fig.update_yaxes(showspikes=True, spikedash='solid',spikemode='across', 
                spikecolor="grey",spikesnap="cursor",spikethickness=1)
fig.update_layout(spikedistance=1000,hoverdistance=1000)

【讨论】：

是的。烛台是问题:) 烛台需要他们目前没有的悬停模板。请检查更新2。我想答案可能就在那里。我也在努力。