【数据科学系列】基于Python的Web应用框架Dash-交互式可视化

基于Python的Web应用框架Dash-交互式可视化

该dash_core_components库包含一个名为的组件Graph。

Graph使用开源plotly.js JavaScript图形库呈现交互式数据可视化 。Plotly.js支持超过35种图表类型，并在矢量质量SVG和高性能WebGL中呈现图表。

dash_core_components.Graph组件的figure参数与Plotly的开放源码Python图形库plotly.py的figure参数是一致的。查看plotly.py文档和图库 以了解更多信息。

Dash组件由一组属性以声明方式来描述。所有这些属性都可以通过回调函数进行更新，但只有这些属性的子集才会通过用户交互进行更新，例如，
当用户单击dcc.Dropdown组件中的选项并且该组件的 value属性发生更改时。

该dcc.Graph部件有四个属性，可以通过用户交互改变：hoverData，clickData，selectedData， relayoutData。将鼠标悬停，单击或者选择图形中的点区域时，这些属性会更新。

在屏幕上打印属性

import json
from textwrap import dedent as d

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

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

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure={
            'data': [
                {
                    'x': [1, 2, 3, 4],
                    'y': [4, 1, 3, 5],
                    'text': ['a', 'b', 'c', 'd'],
                    'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
                    'name': 'Trace 1',
                    'mode': 'markers',
                    'marker': {'size': 12}
                },
                {
                    'x': [1, 2, 3, 4],
                    'y': [9, 4, 1, 4],
                    'text': ['w', 'x', 'y', 'z'],
                    'customdata': ['c.w', 'c.x', 'c.y', 'c.z'],
                    'name': 'Trace 2',
                    'mode': 'markers',
                    'marker': {'size': 12}
                }
            ],
            'layout': {
                'clickmode': 'event+select'
            }
        }
    ),

    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.

                Note that if `layout.clickmode = 'event+select'`, selection data also 
                accumulates (or un-accumulates) selected data if you hold down the shift
                button while clicking.
            """)),
            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 th