剧情:如何仅将垂直和水平线(十字线)显示为hoverinfo? [英] Plotly: How to only show vertical and horizontal line (crosshair) as hoverinfo?

问题描述

我想绘制一个带有两个破折号的图表.我的整个图表如下:

I want to plot a chart with two subplots in plotly dash. My entire chart looks like this:

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图表的屏幕截图:

What I need is a so called crosshair that is common in trading charts. Basically it consists of two lines that are connected to x and y axes and moves with cursor. This is a screenshot from tradingview.com charts:

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

However in my chart there is a little icon that appears when the cursor is on candlesticks:

到目前为止，我发现的是，当光标位于散点图上时，该图标消失并且工作正常.我认为这是因为我在散点图中设置了hovertemplate=[].我无法在烛台图中执行此操作，因为没有此类参数.此外，仅当我设置hovermode='x unified'时，此图标才会出现.如果将其设置为x，则不会出现小图标.但是我需要它与我展示的tradingview.com示例完全一样. 有什么办法可以复制那个十字准线吗?

What I have found out so far is that when the cursor is on the scatter plot, the icon disappears and it works fine. I think that is because I set hovertemplate=[] in the scatterplot. I cannot do that in the candlestick plot because there is no such parameter for it. Moreover, this icon only appears if I set hovermode='x unified'. If I set it to x, the little icon doesn't appear. But I need it to be exactly like the tradingview.com example that I showed. Is there any way to replicate that crosshair?

更新1:

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

I tried fig.update_layout(hoverdistance=0). But the problem is that when the cursor is not on the candlesticks, the crosshair is just not right. I took two screenshots: the first one is from tradingview.com charts and the second one is from my code with hoverdistance set to 0. As can be seen, when the cursor is not on the candlesticks, in the first screenshot the crosshair is still correct. However, in the second screenshot it is just not working correctly. It only works if the cursor is on the candlesticks ONLY. I just want to copy tradingview.com crosshair. Nothing less and nothing more.

更新2:

我认为答案可能出在这些密谋文档上.我目前正在努力.请分享您对此更新的评论.

I think the answer could be on these plotly docs. I am working on it currently. Please share your comments about this update.

推荐答案

这应该做到:

fig.update_layout(hoverdistance=0)

然后将xaxes和yaxes设置为spikesnap='cursor'.

And setting spikesnap='cursor' for xaxes and yaxes.

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

These little adjustments will keep the crosshair intact and remove the little icon that has been bothering you.

来自文档 :

情节:

悬停距离

hoverdistance

设置默认距离(以像素为单位)以查找数据 添加悬停标签(-1表示没有截止，0表示没有查找数据). 这只是将鼠标悬停在点状对象上的真实距离，例如 散点.适用于类似区域的对象(条形图，散点图等) 悬停在区域内部而在外部，但是这些对象会 在发生冲突的情况下不能取代将鼠标悬停在点状对象上.

Sets the default distance (in pixels) to look for data to add hover labels (-1 means no cutoff, 0 means no looking for data). This is only a real distance for hovering on point-like objects, like scatter points. For area-like objects (bars, scatter fills, etc) hovering is on inside the area and off outside, but these objects will not supersede hover on point-like objects in case of conflict.

完整代码:(但没有破折号)

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()

这篇关于剧情:如何仅将垂直和水平线(十字线)显示为hoverinfo?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！