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

Question

---更新--- 1/27/2018

在调查之后。我想我需要走一个不同的方向。 Python Dash看起来是最好的选择，但我仍然遇到一些问题，弄清楚如何使图表动态化，并在点击数据点时向图表添加注释。

我想从dash interactive graph的第一个示例中获取示例，并将其与注释功能相结合 - 这是Annotation的一个示例。

这正是我想要的，但我不知道如何在短版的破折号中实现它 - Styling and Formatting Annotations

---

1/20/2018

我一直在寻找一种方法来编写一个数据提示工具或脚本，类似于Matlab的datatip作为python plotly版本。我没有成功，因为看起来情节中的on_click或mouse_event功能没有很好地记录。我正在尝试创建一个脚本或类，它将使用python与plot接口，以执行与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')

Answer 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)