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 용 다음 앱을 생성합니다. 표준 대시 앱을 실행하려면 다음 단계에 따라 다시 작성 하세요 .

내가 모아 놓은 솔루션은 당신이 목표로하는 것을 정확히해야합니다. 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)