企业官网建设流程全解析

Dash 是一个专门用来打造 Web 应用, 而且代码量很少的低代码框架, 它是在 .js、React 以及 Flask 这些技术的基础上建立起来的, 这个框架能把现代 UI 元素, 比如那些下拉框、滑块还有图形等等, 直接和代码绑定起来, 这样一来, 熟悉相关情况的朋友就可以比较快地弄出演示程序。

安装初试

import pandas as pd

import plotly.express as px

from dash import Dash, html, dcc

app = Dash()

df = pd.DataFrame({'x': [1, 2, 3], 'SF': [4, 1, 2], 'Montreal': [2, 4, 5]}) # x是坐标轴刻度；

fig = px.bar(df, x='x', y=['SF', 'Montreal'], barmode='group') # 柱状图

app.layout = html.Div(children=[

html.H1(children='This is Dash Demo'),

html.Div(children='Dash: 一款Python web应用框架'),

dcc.Graph(id='dash-example-graph', figure=fig)

])

if __name__ == '__main__':

app.run_server(debug=True)

结果

当这个程序完成运行步骤之后, 便会出现下面所示的这些输出结果显示情况。

Dash is on :8050/

* Flask app 'test'

* Debug mode: on

按照提示访问 ： :8050/

经过处理, 可以拿到下面这么个样子:

说明

这个布局的运作方式, 和 HTML 非常类似, 它是依靠一棵组件树来构成的。比如说在代码里面能够看到的那个 html.H1, 还有 html.Div, 以及 dcc.Graph。

dash.html 包含所有 HTML 标签，如 html.H1(='Hello Dash') 实际上生成的 HTML 代码为 Hello Dash。

并不是所有的组成元素都属于单纯的HTML代码, 其中的dash.dcc模块包含了具有交互功能的高级组件, 这些组件在底层是通过React.js、HTML以及CSS来实现的。

每个组件是通过关键字参数来进行描述的, 不过属性这个部分是比较特殊的, 所以一般情况下它总是被放在第一个位置, 因此就不使用关键字参数来对它进行描述了。

设置 app 对象中的 debug 参数为 True, 是可以实现热加载功能的, 也就是在你修改了代码之后, 浏览器会自动进行刷新操作。