[英]Plotly: How to only show vertical and horizontal line (crosshair) as hoverinfo?
我想 plot 一個圖表,在 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 軸並隨 cursor 移動的兩條線組成。 這是來自 tradingview.com 圖表的截圖:
然而,在我的圖表中,當 cursor 位於燭台上時,會出現一個小圖標:
到目前為止我發現的是,當 cursor 在散布 plot 上時,圖標消失並且工作正常。 我認為那是因為我在散點圖中設置hovertemplate=[]
。 我不能在燭台 plot 中這樣做,因為它沒有這樣的參數。 此外,僅當我設置hovermode='x unified'
時才會出現此圖標。 如果我將其設置為 x,則不會出現小圖標。 但我需要它與我展示的 tradingview.com 示例完全相同。 有沒有辦法復制那個十字准線?
更新 1:
我試過fig.update_layout(hoverdistance=0)
。 但問題是,當 cursor 不在燭台上時,十字准線不正確。 我截了兩張截圖:第一張來自 tradingview.com 圖表,第二張來自我的代碼, hoverdistance
設置為 0。
可以看出,當 cursor 不在燭台上時,在第一個屏幕截圖中,十字准線仍然正確。 但是,在第二個屏幕截圖中,它無法正常工作。 僅當 cursor 僅在燭台上時才有效。 我只想復制tradingview.com十字准線。 不多也不少。
更新 2:
我認為答案可能在這些plotly 文檔上。 我目前正在研究它。 請分享您對此更新的意見。
這應該這樣做:
fig.update_layout(hoverdistance=0)
並為 xaxes 和 yaxes 設置spikesnap='cursor'
。
這些小調整將保持十字准線完好無損,並移除一直困擾您的小圖標。
從文檔:
Plot:
懸停距離
設置默認距離(以像素為單位)以查找數據以添加 hover 標簽(-1 表示不截斷,0 表示不查找數據)。 這只是懸停在點狀物體(如散點)上的真實距離。 對於類似區域的對象(條形、散點填充等),懸停在區域內部和外部關閉,但在發生沖突的情況下,這些對象不會取代點狀對象上的 hover。
完整代碼:(但沒有破折號元素)
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()
如果你設置hovermode='x'
那么你可以像這樣格式化尖峰線的樣式:
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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.