Python 使用Dash快速可视化数据
还记得上篇文章我们采用plotly去画出各式各样的图，这次我们就来讲讲，如何把这些图片展示在你的前端上。
dash也是plotly制作团队开源出来的一款dashboard开发平台，主要使用python写的，它主要可以将我们画出来的数据展示在网页上。dash最大的优点就是你在生成前端的时候不需要写任何javascript代码（已经全在底层封装好，画图特效是react.js写的，有兴趣可以去研究一下源码），它可以直接使用python代码将你之前在plotly画出的图在网页上直接展示出来。
需要安装的库：
pip install plotlypip install dash下面我们来演示一个dash的demo：
新建一个app.py文件，复制以下代码：
import dashimport dash_core_components as dccimport dash_html_components as htmlexternal_stylesheets = ['https://codepen.io/chriddyp/pen/bwlwgp.css']app = dash.dash(__name__, external_stylesheets=external_stylesheets)app.layout = html.div(children=[ html.h1(children='dash demo', style={text-align: center}), html.div(children=''' 一款牛逼的python开发的应用程序---------dash ''', style={text-align: center, color: red}), dcc.graph( id='example-graph', figure={ 'data': [ {'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '数据源a'}, {'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '数据源b'}, ], 'layout': { 'title': '数据展示' } } )])if __name__ == '__main__': app.run_server(debug=true)运行效果：
下面来说明一下,如何去使用dash这个框架：
s1: 初始化
app = dash.dash(__name__, external_stylesheets=external_stylesheets)这句话主要用来初始化渲染dash，可以按照你制定的样式进行渲染。
external_stylesheets = ['https://codepen.io/chriddyp/pen/bwlwgp.css']代码中引用的网址是plotly自己的css样式，你也可以修改成你自己想要的其他样式，把这个css文件down到本地然后你可以对他进行修改。具体参考：
https://dash.plotly.com/external-resources
下面重点来了！
在页面上添加你想要添加的元素，首先我们需要初始化页面的布局：
app.layout = html.div(children=[])初始化完毕后我们就可以向这个布局中添加元素了，我们只需要在childern这个list中添加相应的页面元素即可：（注意：每个元素都在list中）
****s2: 添加标签
添加h1标题
html.h1(children='dash demo', style={text-align: center}),添加一个div
html.div(children='一款牛逼的python开发的应用程序---------dash', style={text-align: center, color: red}),我们可以在里面添加style参数来制定它的样式。
****s3: 添加你画的图
graph对象主要就是用来进行画图的，你只需要将画图的数据传递给figure参数即可。
dcc.graph( id='example-graph', figure={ 'data': [ {'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '数据源a'}, {'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '数据源b'}, ], 'layout': { 'title': '数据展示' } } )这里说一下，plotly画出的每个对象都能直接当成参数传入。
我们看一个例子：选择我们上次画等高线图,直接插入画好的fig对象。
import plotly.graph_objects as gofig = go.figure(data= go.contour( z=[[10, 10.625, 12.5, 15.625, 20], [5.625, 6.25, 8.125, 11.25, 15.625], [2.5, 3.125, 5., 8.125, 12.5], [0.625, 1.25, 3.125, 6.25, 10.625], [0, 0.625, 2.5, 5.625, 10]] ))......... dcc.graph( id='example-graph', figure=fig )
添加多个图:
****s4: 添加常见的网页控件
输入框:
dcc.input(id='my-id', value='2333', type='text' ),
下拉框：
dcc.dropdown( options=[ {'label': 'new york city', 'value': 'nyc'}, {'label': 'montréal', 'value': 'mtl'}, {'label': 'san francisco', 'value': 'sf'} ], value='mtl' ),
滑动条:
dcc.slider( min=0, max=9, marks={i: 'level{}'.format(i) for i in range(10)}, value=5, ),
复选框:
dcc.checklist( options=[ {'label': 'new york city', 'value': 'nyc'}, {'label': 'montréal', 'value': 'mtl'}, {'label': 'san francisco', 'value': 'sf'} ], values=['mtl', 'sf'])markdown格式:
dcc.markdown('''dash and markdowndash supports [markdown](http://commonmark.org/help).markdown is a simple way to write and format text.it includes a syntax for things like **bold text** and *italics*,[links](http://commonmark.org/help), inline `code` snippets, lists,quotes, and more.''')****s5: 启动你的应用
if __name__ == '__main__': app.run_server(debug=true)debug在调试的时候可以打开，部署在生产环境的时候记得改成fasle，还有个参数use_reloader,如果你是在jupyter写代码，该参数需要设置成false。
解析电动势平衡方程式并分析其运行特征
PCB高速的界定
中国移动携手合作伙伴共筑视频边缘计算新生态
【科普】干货！带你从0了解移动机器人(四) ——移动机器人导航技术
中兴通讯助力全国应急通信演练比武 快速搭建防汛救灾通信“生命线”
Python 使用Dash快速可视化数据
OLED原理
关于无线充电的三大标准和四种实现方式的介绍
能够提供77GHz雷达芯片的厂商有哪些？是否有一些国产力量在其中？
用于5GHz以上RF测量的微同轴“尾缆”
微间距下，集成封装显示的“春天”
机器学习和人工智能在网络安全中的作用
PWM模拟调光LED内置降压芯片FP7102、FP7103在摄像灯上的应用方案
太赫兹光子学组件研究获重大突破 实现6G电信连接
电子稳定控制系统的原理及应用
水温传感器的电阻和电压正常值为多少？
谷歌推出阿尔法围棋工具帮助人类提高围棋水平
苇创微电子完成B轮融资，聚焦新型显示驱动芯片
电石炉交流电路如何进行无功补偿
这款芯片在计算时也能存储
dash也是plotly制作团队开源出来的一款dashboard开发平台，主要使用python写的，它主要可以将我们画出来的数据展示在网页上。dash最大的优点就是你在生成前端的时候不需要写任何javascript代码（已经全在底层封装好，画图特效是react.js写的，有兴趣可以去研究一下源码），它可以直接使用python代码将你之前在plotly画出的图在网页上直接展示出来。
需要安装的库：
pip install plotlypip install dash下面我们来演示一个dash的demo：
新建一个app.py文件，复制以下代码：
import dashimport dash_core_components as dccimport dash_html_components as htmlexternal_stylesheets = ['https://codepen.io/chriddyp/pen/bwlwgp.css']app = dash.dash(__name__, external_stylesheets=external_stylesheets)app.layout = html.div(children=[ html.h1(children='dash demo', style={text-align: center}), html.div(children=''' 一款牛逼的python开发的应用程序---------dash ''', style={text-align: center, color: red}), dcc.graph( id='example-graph', figure={ 'data': [ {'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '数据源a'}, {'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '数据源b'}, ], 'layout': { 'title': '数据展示' } } )])if __name__ == '__main__': app.run_server(debug=true)运行效果：
下面来说明一下,如何去使用dash这个框架：
s1: 初始化
app = dash.dash(__name__, external_stylesheets=external_stylesheets)这句话主要用来初始化渲染dash，可以按照你制定的样式进行渲染。
external_stylesheets = ['https://codepen.io/chriddyp/pen/bwlwgp.css']代码中引用的网址是plotly自己的css样式，你也可以修改成你自己想要的其他样式，把这个css文件down到本地然后你可以对他进行修改。具体参考：
https://dash.plotly.com/external-resources
下面重点来了！
在页面上添加你想要添加的元素，首先我们需要初始化页面的布局：
app.layout = html.div(children=[])初始化完毕后我们就可以向这个布局中添加元素了，我们只需要在childern这个list中添加相应的页面元素即可：（注意：每个元素都在list中）
****s2: 添加标签
添加h1标题
html.h1(children='dash demo', style={text-align: center}),添加一个div
html.div(children='一款牛逼的python开发的应用程序---------dash', style={text-align: center, color: red}),我们可以在里面添加style参数来制定它的样式。
****s3: 添加你画的图
graph对象主要就是用来进行画图的，你只需要将画图的数据传递给figure参数即可。
dcc.graph( id='example-graph', figure={ 'data': [ {'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '数据源a'}, {'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '数据源b'}, ], 'layout': { 'title': '数据展示' } } )这里说一下，plotly画出的每个对象都能直接当成参数传入。
我们看一个例子：选择我们上次画等高线图,直接插入画好的fig对象。
import plotly.graph_objects as gofig = go.figure(data= go.contour( z=[[10, 10.625, 12.5, 15.625, 20], [5.625, 6.25, 8.125, 11.25, 15.625], [2.5, 3.125, 5., 8.125, 12.5], [0.625, 1.25, 3.125, 6.25, 10.625], [0, 0.625, 2.5, 5.625, 10]] ))......... dcc.graph( id='example-graph', figure=fig )
添加多个图:
****s4: 添加常见的网页控件
输入框:
dcc.input(id='my-id', value='2333', type='text' ),
下拉框：
dcc.dropdown( options=[ {'label': 'new york city', 'value': 'nyc'}, {'label': 'montréal', 'value': 'mtl'}, {'label': 'san francisco', 'value': 'sf'} ], value='mtl' ),
滑动条:
dcc.slider( min=0, max=9, marks={i: 'level{}'.format(i) for i in range(10)}, value=5, ),
复选框:
dcc.checklist( options=[ {'label': 'new york city', 'value': 'nyc'}, {'label': 'montréal', 'value': 'mtl'}, {'label': 'san francisco', 'value': 'sf'} ], values=['mtl', 'sf'])markdown格式:
dcc.markdown('''dash and markdowndash supports [markdown](http://commonmark.org/help).markdown is a simple way to write and format text.it includes a syntax for things like **bold text** and *italics*,[links](http://commonmark.org/help), inline `code` snippets, lists,quotes, and more.''')****s5: 启动你的应用
if __name__ == '__main__': app.run_server(debug=true)debug在调试的时候可以打开，部署在生产环境的时候记得改成fasle，还有个参数use_reloader,如果你是在jupyter写代码，该参数需要设置成false。
解析电动势平衡方程式并分析其运行特征
PCB高速的界定
中国移动携手合作伙伴共筑视频边缘计算新生态
【科普】干货！带你从0了解移动机器人(四) ——移动机器人导航技术
中兴通讯助力全国应急通信演练比武 快速搭建防汛救灾通信“生命线”
Python 使用Dash快速可视化数据
OLED原理
关于无线充电的三大标准和四种实现方式的介绍
能够提供77GHz雷达芯片的厂商有哪些？是否有一些国产力量在其中？
用于5GHz以上RF测量的微同轴“尾缆”
微间距下，集成封装显示的“春天”
机器学习和人工智能在网络安全中的作用
PWM模拟调光LED内置降压芯片FP7102、FP7103在摄像灯上的应用方案
太赫兹光子学组件研究获重大突破 实现6G电信连接
电子稳定控制系统的原理及应用
水温传感器的电阻和电压正常值为多少？
谷歌推出阿尔法围棋工具帮助人类提高围棋水平
苇创微电子完成B轮融资，聚焦新型显示驱动芯片
电石炉交流电路如何进行无功补偿
这款芯片在计算时也能存储