前端之家

  1. 首页
  2. 问答

剧情/破折号-在hoverData上重置范围过滤器

• 问答

我正在尝试使用Dash捕获鼠标悬停事件。我使用hoverData捕获了鼠标的位置。

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

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': 'all'}])},'rangeslider': {'visible': True},'type': 'date'},yaxis={"title": "Price (USD)"},)}

if __name__ == '__main__':
    app.run_server(debug=True)
cadlovehmy 回答：剧情/破折号-在hoverData上重置范围过滤器

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

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

enter image description here

plotlyplotly-dashpython-3.x
本文链接：https://www.f2er.com/3110495.html

大家都在问