python - Plotly-Dash:如何在 plotly dash 中为悬停功能编写交互式回调代码

Question

是否可以在图表底部有一个文本字段，以破折号显示它们所在点的文本(将悬停数据显示为纯文本)。因此，当用户将鼠标悬停在某个点上时，文本框将能够进行更改。我已经定义了一个 dcc.Graph 组件和应用程序布局，但我不确定如何为 hoverdata 定义回调函数。

我使用下面的代码来定义 dcc.Graph 和 app.layout

fig = go.Figure(data=plot_data, layout=plot_layout)

app.layout = html.Div([
    dcc.Graph(figure=fig),
    
        html.Div([
                    dcc.Markdown(id='mpg-metrics')
                ],style={'width':'20%','display':'inline-block'})
])

任何有关回调的帮助都会很棒。提前致谢

Answer 1

是的，这很有可能!由于您没有提供设置的完整描述，我整理了一个最小示例，该示例利用了 dash.plotly.com/interactive-graphing 中的元素。和 https://community.plotly.com/: Use Hover Trace As Input for Callback其中描述了在回调中使用悬停数据。下面的代码片段将为 JupyterDash 生成以下应用程序。如果您想运行标准的 dash 应用程序，只需按照 these steps 重写它.

我放在一起的解决方案应该完全符合您的目标。每次将鼠标悬停在 dcc.Graph 中图中其中一条线上的一个点上时组件，有关跟踪的一组详细信息显示在 html.Pre 中它下面的组件，例如 x 和 y 值。试试看，让我知道它对您的效果如何!

应用 1:

如果您只想检索输出的某些元素，您可以像这样对输出进行子集化:

json.dumps({'Date:':hoverData['points'][0]['x'],
            'Value:':hoverData['points'][0]['y']}, indent = 2)

应用 2:

JupyterDash，App1 的完整代码

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
x = np.arange(20)+10

fig = go.Figure(data=go.Scatter(x=x, y=x**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=x**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

JupyterDash、App2 的完整代码

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
y = np.arange(100)+10
x = pd.date_range(start='1/1/2021', periods=len(y))

fig = go.Figure(data=go.Scatter(x=x, y=y**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=y**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    try:
        return json.dumps({'Date:':hoverData['points'][0]['x'],
                           'Value:':hoverData['points'][0]['y']}, indent = 2)
    except:
        return None

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)