Plotly。如何只显示垂直线和水平线（十字线）作为悬停信息？

Question

我想在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:

我想答案可能在这些 绘声绘色. 我目前正在努力。请分享您对这次更新的意见。

Answer 1

这样应该就可以了。

fig.update_layout(hoverdistance=0)

然后设置 spikesnap='cursor' 为Xaxes和Yaxes。

这些小调整可以保持十字线的完整性，并去除一直困扰你的小图标。

从 文献:

剧情。

悬停距离

设置寻找数据添加悬停标签的默认距离（以像素为单位）（-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()

Answer 2

如果你设置 hovermode='x' 然后你可以格式化 穗线式 像这样。

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

UPDATE: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)