是否有类似于matlabs datatip的python dash中的datatip类或方法来编写脚本？

Posted 2023-02-18

【中文标题】是否有类似于matlabs datatip的python dash中的datatip类或方法来编写脚本？

【英文标题】：Is there a datatip class or way to script one in python dash similar to matlabs datatip?

【发布时间】：2018-06-29 09:45:49

【问题描述】：

---更新--- 2018 年 1 月 27 日

经过调查。我想我需要走一个不同的方向。 Python Dash 看起来是最好的选择，但是当我单击数据点时，我仍然无法弄清楚如何使图形动态化并为图形添加注释。

我想从dash interactive graph 第一个示例中获取示例并将其与注释功能结合起来——Annotation 的示例。

这正是我想要的，但我不确定如何在 python 版本的 dash 中实现它 - Styling and Formatting Annotations

---

2018 年 1 月 20 日

我一直在寻找一种方法来编写类似于 Matlab 的数据提示的数据提示工具或脚本作为 python 绘图版本。我没有成功，因为似乎 plotly 中的 on_click 或 mouse_event 功能没有很好地记录。我正在尝试创建一个脚本或类，该脚本或类将与 plotly 使用 python 执行与 Matlab 的 datatip 工具类似的功能。

这是我目前发现的。

此示例显示单击条形图到visit url on click。

此示例在单击 Plotly.js create a point on click 时创建数据点。

这是鼠标事件处理 - mouse-events

这是最好的例子，但它适用于 javascript，我不确定是否有适用于 python -plotlyjs-events

我正在使用 Plotly 的标准示例来执行测试脚本，但还没有成功。任何建议或帮助表示赞赏。

以下是 plotly 的标准示例。

import plotly
import plotly.graph_objs as go
import plotly.widgets.graph_widget as gw
# Create random data with numpy
import numpy as np

N = 1000
random_x = np.random.randn(N)
random_y = np.random.randn(N)

# Create a trace
trace = go.Scatter(
    x = random_x,
    y = random_y,
    mode = 'markers'
)

data = [trace]
plotly.offline.plot(data, filename='basic-scatter')

【参考方案1】：

在搜索了 plotly 和 dash 源代码以及示例之后。我能够想出一些简单的功能。这是一个开始，但它让我到达了我想去的地方。

import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, Event
from textwrap import dedent as d
import json


import plotly.graph_objs as go

N = 1000
random_x = np.random.randn(N)
random_y = np.random.randn(N)

#Dash appliction boiler plate
app = dash.Dash()

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

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



# Edit your markup here
app.layout = html.Div([
    html.H1('Wielding Data'),
    dcc.Graph(id='basic-interactions'), 


    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
                **Hover Data**

                Mouse over values in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre'])
        ], className='three columns'),

        html.Div([
            dcc.Markdown(d("""
                **Click Data**

                Click on points in the graph.
            """)),
            html.Pre(id='click-data', style=styles['pre']),
        ], className='three columns'),

        html.Div([
            dcc.Markdown(d("""
                **Selection Data**

                Choose the lasso or rectangle tool in the graph's menu
                bar and then select points in the graph.
            """)),
            html.Pre(id='selected-data', style=styles['pre']),
        ], className='three columns'),

        html.Div([
            dcc.Markdown(d("""
                **Zoom and Relayout Data**

                Click and drag on the graph to zoom or click on the zoom
                buttons in the graph's menu bar.
                Clicking on legend items will also fire
                this event.
            """)),
            html.Pre(id='relayout-data', style=styles['pre']),
        ], className='three columns')
    ])
])

@app.callback(
        Output('basic-interactions','figure'),
        [Input('basic-interactions','clickData')
         ])
def update_graph(clickData):
    if not clickData:
        x_value=[]
        y_value=[]

    else:
        x_value = clickData['points'][0]['x']
        y_value = clickData['points'][0]['y']

    return'data': [go.Scatter(
                x=random_x,
                y=random_y,
                mode = 'markers'
                )          

            ],
            'layout': 'hovermode': 'closest',
                       'annotations':[
                               'x':x_value,
                               'y':y_value,
                               'arrowhead': 6,
                               'xref':'x',
                               'yref':'y',
                               'text':'X:' + str(x_value) + '\n' + 'Y:' + str(y_value),
                               'ax':0,
                               'ay':-20]


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


@app.callback(
    Output('click-data', 'children'),
    [Input('basic-interactions', 'clickData')])
def display_click_data(clickData): 
    print(clickData)
    return json.dumps(clickData, indent=2)


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

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

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