dash学习笔记（一）-----HTML部分

dash

背景

       大数据开发过程中，我们常常需要向别人展示一些统计结果，有时候还是实时的统计结果。最好能以网页方式提供，让别人在他的机器上，使用浏览器也能访问。这时候统计工具往往使用Python，而把分析图表画出来使用JavaScript，需要搭建web服务，还涉及中间过程的数据衔接。而Dash能帮我们实现以上所有的工作。

说明

       Dash是Python的一个库，使用pip即可安装。用它可以启动一个http server， python调用它做图，而它内部将这些图置换成JavaScript显示，进行数据分析和展示。

       Dash是一个用于构建Web应用程序的高效Python框架。
       Dash写在Flask，Plotly.js和React.js之上，非常适合在纯Python中，使用高度自定义的用户界面，构建数据可视化应用程序。它特别适合使用Python进行数据分析的人。
       通过几个简单的模式，Dash抽象出构建基于Web的交互式应用程序所需的所有技术和协议。
       Dash应用程序在Web浏览器中呈现，可以将应用程序部署到服务器，然后通过URL进行共享。
       由于Dash应用程序是在Web浏览器中进行查看，因此Dash本质上是跨平台和移动端的。
       Dash是一个开源库，在许可的MIT下发布，Plotly开发Dash，并提供了一个在企业环境中轻松部署Dash应用程序的平台。

相关学习资料

Python的Web可视化框架Dash(1)—简介
plotly-dash 英文文档
python文档

简单Demo

安装

pip install dash

外网下载比较慢，可以加入如下代码在镜像中下载
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple dash

将dash集成到flask中的简易demo

import dash
import dash_html_components as html

app = dash.Dash()


app.layout = html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('lalala'),
        html.P("hahahahahhahahaha")
    ])
])


if __name__ == '__main__':
    app.run_server(debug=True)

运行结果如下图所示：

打开浏览器127.0.0.1:8050显示如下：

进入正题

   刚开始学习dash，可以将 dash英文文档 和 CSS菜鸟教程 进行对比学习，这样易于理解也学得快。

dash英文文档
CSS菜鸟教程
W3school教程

标签

h1标签、div标签、p标签

dash1.py文件

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('lalala'),
        html.P("hahahahahhahahaha")
    ])
])

上述代码意思等同于下面html代码(下同)

aaa.html文件

添加样式、选择器的标签

说明：上面style里面的是样式参数；而class、id是选择器。

（打开浏览器显示，需要将dash代码集成到flask，参考上面demo示例，后续例子不再赘述）

打开浏览器127.0.0.1:8050显示如下：

样式参数

样式参数汇总，如下链接：
CSS样式表参数属性列表大全

选择器

选择器参数及优先级汇总，如下链接：
CSS选择器及优先级 总结