基于Plot ly Dash 使用 Python 开发交互式互动数据图

                       

基于Plot.ly Dash 使用 Python 开发交互式互动数据图

在 Anaconda3 5.0.0 中安装 Plot.ly Dash

http://blog.csdn.net/hu_zhenghui/article/details/78303032

代码分析

导入 dash

import dash
   
   

    
    
1
   
   

导入 dash_core_components，本例中会用到 dash_core_components.Graph 用于显示数据图， dash_core_components.Slider 用于显示滑块

import dash_core_components
   
   

    
    
1
   
   

导入 dash_html_components，本例中使用 dash_html_components.Div 包裹 dash_core_components 的元素

import dash_html_components
   
   

    
    
1
   
   

导入 plotly

import plotly
   
   

    
    
1
   
   

导入 numpy

import numpy
   
   

    
    
1
   
   

从 dash 中创建一个 Dash 应用程序

app = dash.Dash()
   
   

    
    
1
   
   

app 的类型为 dash.dash.Dash

app?
   
   

    
    
1
   
   

    Type:        Dash
    String form: <dash.dash.Dash object at 0x000001DBB8F2BB70>
    File:        c:\programdata\anaconda3\lib\site-packages\dash\dash.py
    Docstring:   <no docstring>
    

从 dash_core_components 中创建一个 dash_core_components.Graph 数据图组件

dash_core_components.Graph(id='graph')
   
   

    
    
1
   
   

Graph('graph')
   
   

    
    
1
   
   

dash_core_components.Graph 的参数较多，本例只使用 id，用于后面的 dash.dependencies.Output 中的组件 id

dash_core_components.Graph?
   
   

    
    
1
   
   

    Init signature: dash_core_components.Graph(**kwargs)
    Docstring:     
    A Graph component.
    
    
    Keyword arguments:
    - id (string; required)
    - clickData (dict; optional): Data from latest click event
    - hoverData (dict; optional): Data from latest hover event
    - clear_on_unhover (boolean; optional): If True, clear_on_unhover will clear the hoverData property
    when the user "unhovers" from a point.
    If False, then the hoverData property will be equal to the
    data from the last point that was hovered over.
    - selectedData (dict; optional): Data from latest select event
    - relayoutData (dict; optional): Data from latest relayout event which occurs
    when the user zooms or pans on the plot
    - figure (dict; optional): Plotly figure object. See schema:
    https://plot.ly/javascript/reference
    - style (dict; optional): Generic style overrides on the plot div
    - className (string; optional): className of the parent div
    - animate (boolean; optional): Beta: If true, animate between updates using
    plotly.js's animate function
    - animation_options (dict; optional): Beta: Object containing animation settings.
    Only applies if animate is true
    - config (optional): Plotly.js config options.
    See https://plot.ly/javascript/configuration-options/
    for more info.. config has the following type: dict containing keys 'staticPlot', 'editable', 'edits', 'autosizable', 'queueLength', 'fillFrame', 'frameMargins', 'scrollZoom', 'doubleClick', 'showTips', 'showAxisDragHandles', 'showAxisRangeEntryBoxes', 'showLink', 'sendData', 'linkText', 'displayModeBar', 'modeBarButtonsToRemove', 'modeBarButtonsToAdd', 'modeBarButtons', 'displaylogo', 'plotGlPixelRatio', 'topojsonURL', 'mapboxAccessToken'.
    Those keys have the following types: 
      - staticPlot (boolean; optional): no interactivity, for export or image generation
      - editable (boolean; optional): we can edit titles, move annotations, etc - sets all pieces of edits
    unless a separate edits config item overrides individual parts
      - edits (optional): a set of editable properties. edits has the following type: dict containing keys 'annotationPosition', 'annotationTail', 'annotationText', 'axisTitleText', 'colorbarPosition', 'colorbarTitleText', 'legendPosition', 'legendText', 'shapePosition', 'titleText'.
    Those keys have the following types: 
      - annotationPosition (boolean; optional): annotationPosition: the main anchor of the annotation, which is the
    text (if no arrow) or the arrow (which drags the whole thing leaving
    the arrow length & direction unchanged)
      - annotationTail (boolean; optional): just for annotations with arrows, change the length and direction of the arrow
      - annotationText (boolean; optional)
      - axisTitleText (boolean; optional)
      - colorbarPosition (boolean; optional)
      - colorbarTitleText (boolean; optional)
      - legendPosition (boolean; optional)
      - legendText (boolean; optional): edit the trace name fields from the legend
      - shapePosition (boolean; optional)
      - titleText (boolean; optional): the global layout.title
      - autosizable (boolean; optional): DO autosize once regardless of layout.autosize
    (use default width or height values otherwise)
      - queueLength (number; optional): set the length of the undo/redo queue
      - fillFrame (boolean; optional): if we DO autosize, do we fill the container or the screen?
      - frameMargins (number; optional): if we DO autosize, set the frame margins in percents of plot size
      - scrollZoom (boolean; optional): mousewheel or two-finger scroll zooms the plot
      - doubleClick (a value equal to: false, 'reset', 'autosize', 'reset+autosize'; optional): double click interaction (false, 'reset', 'autosize' or 'reset+autosize')
      - showTips (boolean; optional): new users see some hints about interactivity
      - showAxisDragHandles (boolean; optional): enable axis pan/zoom drag handles
      - showAxisRangeEntryBoxes (boolean; optional): enable direct range entry at the pan/zoom drag points
    (drag handles must be enabled above)
      - showLink (boolean; optional): link to open this plot in plotly
      - sendData (boolean; optional): if we show a link, does it contain data or just link to a plotly file?
      - linkText (string; optional): text appearing in the sendData link
      - displayModeBar (a value equal to: true, false, 'hover'; optional): display the mode bar (true, false, or 'hover')
      - modeBarButtonsToRemove (list; optional): remove mode bar button by name.
    All modebar button names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js
    Common names include:
     - sendDataToCloud
    - (2D): zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d
    - (Cartesian): hoverClosestCartesian, hoverCompareCartesian
    - (3D): zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d
    - (Geo): zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo
    - hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews
      - modeBarButtonsToAdd (list; optional): add mode bar button using config objects
      - modeBarButtons (boolean | number | string | dict | list; optional): fully custom mode bar buttons as nested array,
    where the outer arrays represents button groups, and
    the inner arrays have buttons config objects or names of default buttons
      - displaylogo (boolean; optional): add the plotly logo on the end of the mode bar
      - plotGlPixelRatio (number; optional): increase the pixel ratio for Gl plot images
      - topojsonURL (string; optional): URL to topojson files used in geo charts
      - mapboxAccessToken (boolean | number | string | dict | list; optional): Mapbox access token (required to plot mapbox trace types)
    If using an Mapbox Atlas server, set this option to '',
    so that plotly.js won't attempt to authenticate to the public Mapbox server.
    
    Available events: 'click', 'hover', 'selected', 'relayout', 'unhover'
            
    File:           c:\programdata\anaconda3\lib\abc.py
    Type:           ABCMeta
    

从 dash_core_components 创建一个 dash_core_components.Slider 滑块组件

dash_core_components.Slider(        id='slider-a',        min=1,        max=5,        value=1,        step=None,        marks={a: 'y = cos(t * ' + str(a) + ')' for a in range(1, 6)}    )
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
   
   

Slider(id='slider-a', marks={1: 'y = cos(t * 1)', 2: 'y = cos(t * 2)', 3: 'y = cos(t * 3)', 4: 'y = cos(t * 4)', 5: 'y = cos(t * 5)'}, value=1, min=1, max=5)
   
   

    
    
1
   
   

本例中使用的 dash_core_components.Slider 的参数较多。 id 为滑块对象的 id，用于后面的 dash.dependencies.Input 中的组件 id，min 为滑块最小值，max 为滑块最大值，value 为滑块初始值，step 为滑块步长，marks 为值上的标签

dash_core_components.Slider?
   
   

    
    
1
   
   

    Init signature: dash_core_components.Slider(**kwargs)
    Docstring:     
    A Slider component.
    A slider component with a single handle.
    
    Keyword arguments:
    - id (string; optional)
    - marks (optional): Marks on the slider.
    The key determines the position,
    and the value determines what will show.
    If you want to set the style of a specific mark point,
    the value should be an object which
    contains style and label properties.. marks has the following type: dict containing keys 'number'.
    Those keys have the following types: 
      - number (optional): . number has the following type: string | dict containing keys 'style', 'label'.
    Those keys have the following types: 
      - style (dict; optional)
      - label (string; optional)
    - value (number; optional): The value of the input
    - className (string; optional): Additional CSS class for the root DOM node
    - disabled (boolean; optional): If true, the handles can't be moved.
    - dots (boolean; optional): When the step value is greater than 1,
    you can set the dots to true if you want to
    render the slider with dots.
    - included (boolean; optional): If the value is true, it means a continuous
    value is included. Otherwise, it is an independent value.
    - min (number; optional): Minimum allowed value of the slider
    - max (number; optional): Maximum allowed value of the slider
    - step (number; optional): Value by which increments or decrements are made
    - vertical (boolean; optional): If true, the slider will be vertical
    - updatemode (a value equal to: 'mouseup', 'drag'; optional): Determines when the component should update
    its value. If mouseup, then the slider
    will only trigger its value when the user has
    finished dragging the slider. If drag, then
    the slider will update its value continuously
    as it is being dragged.
    Only use drag if your updates are fast.
    
    Available events: 'change'
            
    File:           c:\programdata\anaconda3\lib\abc.py
    Type:           ABCMeta
    

使用 dash_html_components.Div 创建一个div包裹上面两个元素

dash_html_components.Div?
   
   

    
    
1
   
   

    Init signature: dash_html_components.Div(children=None, **kwargs)
    Docstring:     
    A Div component.
    
    
    Keyword arguments:
    - children (a list of or a singular dash component, string or number; optional): The children of this component
    - id (string; optional): The ID of this component, used to identify dash components
    in callbacks. The ID needs to be unique across all of the
    components in an app.
    - n_clicks (optional): An integer that represents the number of times
    that this element has been clicked on.
    - key (string; optional): A unique identifier for the component, used to improve
    performance by React.js while rendering components
    See https://reactjs.org/docs/lists-and-keys.html for more info
    - accessKey (string; optional): Defines a keyboard shortcut to activate or add focus to the element.
    - className (string; optional): Often used with CSS to style elements with common properties.
    - contentEditable (string; optional): Indicates whether the element's content is editable.
    - contextMenu (string; optional): Defines the ID of a <menu> element which will serve as the element's context menu.
    - dir (string; optional): Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
    - draggable (string; optional): Defines whether the element can be dragged.
    - hidden (string; optional): Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
    - lang (string; optional): Defines the language used in the element.
    - spellCheck (string; optional): Indicates whether spell checking is allowed for the element.
    - style (dict; optional): Defines CSS styles which will override styles previously set.
    - tabIndex (string; optional): Overrides the browser's default tab order and follows the one specified instead.
    - title (string; optional): Text to be displayed in a tooltip when hovering over the element.
    
    Available events: 'click'
            
    File:           c:\programdata\anaconda3\lib\abc.py
    Type:           ABCMeta
    

本例中使用 dash_html_components.Div 的 style 参数设置样式

style={'margin-left' : '10%', 'width' : '80%'}
   
   

    
    
1
   
   

def update_figure(slider_a): 定义一个回调函数

使用 @app.callback 装饰器设置 update_figure 为回调函数，注意 output 是一个值，类型为 dash.dependencies.Output，而 inputs 是列表，列表中每个值的类型都是 dash.dependencies.Input

@app.callback?
   
   

    
    
1
   
   

    Signature: app.callback(output, inputs=[], state=[], events=[])
    Docstring: <no docstring>
    File:      c:\programdata\anaconda3\lib\site-packages\dash\dash.py
    Type:      method
    

@app.callback
   
   

    
    
1
   
   

使用 dash.dependencies.Output 定义回调函数的输出依赖关系，其中第一个参数为 dash_core_components.Graph 中定义的 id

dash.dependencies.Output('graph', 'figure')
   
   

    
    
1
   
   

<dash.dependencies.Output at 0x1dbb9189c50>
   
   

    
    
1
   
   

dash.dependencies.Output 定义输出依赖关系，其中第一个参数为组件 id，第二个参数为输出的组件属性

dash.dependencies.Output?
   
   

    
    
1
   
   

    Init signature: dash.dependencies.Output(component_id, component_property)
    Docstring:      <no docstring>
    File:           c:\programdata\anaconda3\lib\site-packages\dash\dependencies.py
    Type:           type
    

使用 dash.dependencies.Input 定义回调函数的输入依赖关系，其中第一个参数为 dash_core_components.Slider 中定义的 id

dash.dependencies.Input('slider-a', 'value')
   
   

    
    
1
   
   

<dash.dependencies.Input at 0x1dbb9189518>
   
   

    
    
1
   
   

dash.dependencies.Input 定义输入依赖关系，其中第一个参数为组件 id，第二个参数为组件属性

dash.dependencies.Input?
   
   

    
    
1
   
   

    Init signature: dash.dependencies.Input(component_id, component_property)
    Docstring:      <no docstring>
    File:           c:\programdata\anaconda3\lib\site-packages\dash\dependencies.py
    Type:           type
    

最后 运行应用程序 app.run_server()

在 app.run_server 的参数中可以设置端口、调试模式以及其他的 flask 选项

app.run_server?
   
   

    
    
1
   
   

    Signature: app.run_server(port=8050, debug=False, **flask_run_options)
    Docstring: <no docstring>
    File:      c:\programdata\anaconda3\lib\site-packages\dash\dash.py
    Type:      method
    

运行程序，可以看到如下所示信息

C:\ProgramData\Anaconda3\python.exe "C:/Users/huzh/OneDrive/Python/plotly Dash/Callback/Callback.py" * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
   
   

    
    
1
    
    
2
   
   

访问网址，可以看到如图所示效果，也就是默认的 y=cos(t∗1) y=cos(t∗1) 滑块，可以看到曲线也随之变化。

完整源代码如下：

import dashimport dash_core_componentsimport dash_html_componentsimport plotlyimport numpyapp = dash.Dash()app.layout = dash_html_components.Div([    dash_core_components.Graph(id='graph'),    dash_core_components.Slider(        id='slider-a',        min=1,        max=5,        value=1,        step=None,        marks={a: 'y = cos(t * ' + str(a) + ')' for a in range(1, 6)}    )], style={'margin-left' : '10%', 'width' : '80%'})@app.callback(    dash.dependencies.Output('graph', 'figure'),    [        dash.dependencies.Input('slider-a', 'value')    ])def update_figure(slider_a):    t = numpy.linspace(0, 2 * numpy.pi, 1000)    x = numpy.sin(t)    y = numpy.cos(t * slider_a)    data = []    data.append(plotly.graph_objs.Scatter(x=x, y=y))    layout = plotly.graph_objs.Layout(        xaxis={'title': 'sin(t)'},        yaxis={'title': 'cos(t * ' + str(slider_a) + ')'}    )    return {        'data': data,        'layout': layout    }if __name__ == '__main__':    app.run_server()
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
    
    
10
    
    
11
    
    
12
    
    
13
    
    
14
    
    
15
    
    
16
    
    
17
    
    
18
    
    
19
    
    
20
    
    
21
    
    
22
    
    
23
    
    
24
    
    
25
    
    
26
    
    
27
    
    
28
    
    
29
    
    
30
    
    
31
    
    
32
    
    
33
    
    
34
    
    
35
    
    
36
    
    
37
    
    
38
    
    
39
    
    
40
    
    
41
    
    
42
    
    
43
    
    
44
    
    
45
   
   

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow