基於Plot.ly Dash 使用 Python 開發交互式互動數據圖
在 Anaconda3 5.0.0 中安裝 Plot.ly Dash
http://blog.csdn.net/hu_zhenghui/article/details/78303032
代碼分析
導入 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
中創建一個 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 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)}
)
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
創建一個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()