情节：如何仅将垂直和水平线（十字线）显示为hoverinfo？

Question

我想以散点图的形式绘制带有两个子图的图表。我的整个图表如下所示：

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示例完全一样。有没有办法复制那个十字准线？

UPDATE 1：

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

UPDATE 2：

我认为答案可能是关于这些plotly docs的。我目前正在努力。请分享您对此更新的评论。

Answer 1

这应该做：

fig.update_layout(hoverdistance=0)

并为[x和x轴设置spikesnap='cursor'。

这些小的调整将使十字准线保持完整，并删除困扰您的小图标。

来自the docs：

图：

hoverdistance

设置默认距离（以像素为单位）以查找数据添加悬停标签（-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'，则可以像这样格式化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)