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

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

在 Anaconda3 5.0.0 中安装 Plot.ly Dash

代码分析

dash

import dash

dash_core_components

dash_core_components.Graph

dash_core_components.Slider

import dash_core_components

dash_html_components

dash_html_components.Div

dash_core_components

import dash_html_components

plotly

import plotly

numpy

import numpy

dash

app = dash.Dash()

app

dash.dash.Dash

app?

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

Graph('graph')

dash_core_components.Graph

id

dash.dependencies.Output

id

dash_core_components.Graph?

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 [code]hoverData

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 [code]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)}
)

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)

dash_core_components.Slider

id

id

dash.dependencies.Input

id

min

max

value

step

marks

dash_core_components.Slider?

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

dash_html_components.Div?

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%'}

def update_figure(slider_a):

@app.callback

update_figure

output

dash.dependencies.Output

inputs

dash.dependencies.Input

@app.callback?

Signature: app.callback(output, inputs=[], state=[], events=[])

Docstring: <no docstring>

File:  c:\programdata\anaconda3\lib\site-packages\dash\dash.py

Type:  method

@app.callback

dash.dependencies.Output

dash_core_components.Graph

id

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

<dash.dependencies.Output at 0x1dbb9189c50>

dash.dependencies.Output

id

dash.dependencies.Output?

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

<dash.dependencies.Input at 0x1dbb9189518>

dash.dependencies.Input

id

dash.dependencies.Input?

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?

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)

import dash
import dash_core_components
import dash_html_components
import plotly
import numpy

app = 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()