Python Plotly/Dash--范围过滤器在悬停数据上重置

我正在尝试使用Dash捕捉鼠标悬停事件。我使用

hoverData

捕捉鼠标的位置

当我使用范围选择器或范围滑块过滤时间序列时，会出现问题。绘图正确地减少到选定的时间，但当我用鼠标悬停它时，它会重置为主视图（整个主系列）

---

我确信应该有更好的解决方案，但这就是我得到的（Dash v1.6.0）：

---

谢谢您的回答，是的，我想在我筛选的数据中获取

hoverData

，但当我用鼠标悬停时，过滤器会重置。我已经用运行的示例代码编辑了这些问题，可以重现我的问题。托尼，如果我想在图表上画一些东西，比如在我的鼠标所在的时间序列上画一个小圆圈，该怎么办？这就是我将使用的

hoverData

。我已经更新了代码。

图形

的

relayoutData

属性中有一个

xaxis.range

，您可以使用它来设置回调中的布局范围。如果有人看到了这一点，中提供了一个更通用的解决方案

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

app.layout = html.Div([
    dcc.Graph(
        id='stock-plot'
    ),
], className="container")

@app.callback(
    Output('stock-plot', 'figure'),
    [Input('stock-plot', 'hoverData')])
def drawStockPrice(hoverData):
    traces = [go.Scatter(
                    x=df.Date,
                    y=df['AAPL.High'],
                    mode='lines',
                    opacity=0.7,
                    connectgaps=True),
            ]
    return {'data': traces,
            'layout': go.Layout(colorway=["#5E0DAC", '#FF4F00', '#375CB1', '#FF7400', '#FFF400', '#FF0056'],
                                          height=600,
                                          title=f"Closing prices",
                                          xaxis={"title": "Date",
                                                 'rangeselector': {'buttons': list([{'count': 1, 'label': '1M',
                                                                                     'step': 'month',
                                                                                     'stepmode': 'backward'},
                                                                                    {'count': 6, 'label': '6M',
                                                                                     'step': 'month',
                                                                                     'stepmode': 'backward'},
                                                                                    {'step': 'all'}])},
                                                 'rangeslider': {'visible': True}, 'type': 'date'},
                                          yaxis={"title": "Price (USD)"},
    )}

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

layout = go.Layout( colorway=["#5E0DAC", '#FF4F00', '#375CB1', '#FF7400', '#FFF400', '#FF0056'],
                    height=600,
                    title=f"Closing prices",
                    xaxis={"title": "Date",
                           'rangeselector': {'buttons': list([{'count': 1, 'label': '1M',
                                                               'step': 'month',
                                                               'stepmode': 'backward'},
                                                              {'count': 6, 'label': '6M',
                                                               'step': 'month',
                                                               'stepmode': 'backward'},
                                                              {'step': 'all'}]
                                              ),  
                           },
                           'rangeslider': {'visible': True}, 
                           'type': 'date',            
                    },
                    yaxis={"title": "Price (USD)"},
)

traces = [go.Scatter(   x=df.Date,
                        y=df['AAPL.High'],
                        mode='lines',
                        opacity=0.7,
                        connectgaps=True
)]

app.layout = html.Div([
    dcc.Graph(
        id='stock-plot',
        figure={
            'data': traces,
            'layout': layout
        }        
    ),
], className="container")

@app.callback(
    Output('stock-plot', 'figure'),
    [Input('stock-plot', 'hoverData'),
     Input('stock-plot', 'relayoutData')],
    [State('stock-plot', 'figure')]
)
def drawStockPrice(hoverData, selected, figure):
    data = figure['data']
    layout = figure['layout']

    if selected is not None and 'xaxis.range' in selected:
        layout['xaxis']['range'] = selected['xaxis.range']

    return {'data': data,
            'layout': layout
    }

if __name__ == '__main__':
    app.run_server(debug=True)