Dash是基于Flask的Python可视化工具，严格说来由三个部分组成，首先是Flask提供了标准web环境，再次是plotly这个图表可视化工具，最后是与dash相配套的html、图表等交互式组件。本人也陆续试过pyechart，但就集成性和可视化而言，与dash还是有一定差距。

代码示例

import dash --集成flask
import dash_core_components as dcc --与图表相关的核心组件
import dash_html_components as html --与HTML交互相关的组件
import plotly.graph_objects as go      --plotly的底层组件
import plotly.express as px     --plotly的高阶组件，同时提供了内置的数据集
fig = go.Figure()
fig = go.Figure(data=go.Bar(y=[2, 3, 1]))
# fig.add_trace( ... )
# fig.update_layout( ... )
df = px.data.gapminder()
df = px.data.gapminder().query("country=='China'")
fig = px.line(df, x="year", y="lifeExp", title='人口增长率')
app = dash.Dash()
app.layout = html.Div([dcc.Graph(figure=fig)
])
app.run_server(debug=True, use_reloader=False)

Plotly Express是对 Plotly.py 的高级封装，内置了大量实用、现代的绘图模板，用户只需调用简单的API函数，即可快速生成漂亮的互动图表，可满足90%以上的应用场景。

plotly.express附带了一些用于演示、教育和测试目的的内置数据集。

这些数据以CSV格式存储在包的目录下，以pandas类型获取到数据，方便进行图表功能测试。

1、gapminder():每一行代表一个国家在给定的年份GDP、人口增长等信息。包含1704行和以下列：

['country', 'continent', 'year', 'lifeExp', 'pop', 'gdpPercap', 'iso_alpha', 'iso_num'].

2、tips():每行代表一张餐厅账单。包含244行和以下列：

['total_bill', 'tip', 'sex', 'smoker', 'day', 'time', 'size'].

3、iris():每行代表一朵花。包含150行和以下列：

['sepal_length', 'sepal_width', 'petal_length', 'petal_width', 'species', 'species_id'].

4、wind():每行表示一个基本方向上的风强度级别及其频率。包含128行和以下列：

['direction', 'strength', 'frequency'].

5、election():每一行代表2013年蒙特利尔市长选举中一个选区的投票结果。包含58行和以下列：

['district', 'Coderre', 'Bergeron', 'Joly', 'total', 'winner', 'result', 'district_id'].

6、election_geojson():每个功能代表2013年蒙特利尔市长选举中的一个选区。

GeoJSON格式的“dict”，具有58个多边形或多多边形特征，其“id”是一个选区数字ID，其'district'属性是ID和地区名称。

7、carshare():每一行表示在蒙特利尔呆了一个月，区域中心附近的汽车共享服务的可用性。包含249行和以下列：

['centroid_lat', 'centroid_lon', 'car_hours', 'peak_hour'].

8、stocks(indexed=False):这一广泛数据集中的每一行代表2018/2019年6只科技股的收盘价。包含100行和以下列：

['date', 'GOOG', 'AAPL', 'AMZN', 'FB', 'NFLX', 'MSFT'].

9、experiment(indexed=False):这个大数据集中的每一行代表100名模拟参与者在三个假设实验中的结果，以及他们的性别和对照/治疗组。包含100行和以下列：

['experiment_1', 'experiment_2', 'experiment_3', 'gender', 'group'].

10、medals_wide(indexed=False):此数据集表示截至2020年前三名国家的奥运会短道速滑奖牌表。包含3行和以下列：

['nation', 'gold', 'silver', 'bronze'].

11、medals_long(indexed=False):此数据集表示截至2020年前三名国家的奥运会短道速滑奖牌表。包含9行和以下列：

['nation', 'medal', 'count'].

plotly.express提供了30多种标准图表，用以简化操作。

1、scatter：散点图 在散点图中，每行data_frame由2D空间中的符号标记表示；

2、scatter_3d：三维散点图  在3D散点图中，每行data_frame由3D空间中的符号标记表示；

3、scatter_polar：极坐标散点图     在极坐标散点图中，每行data_frame由极坐标中的符号标记表示；

4、scatter_ternary：三元散点图     在三元散点图中，每行data_frame由三元坐标中的符号标记表示；

5、scatter_mapbox：地图散点图      在Mapbox散点图中，每一行data_frame都由Mapbox地图上的符号标记表示；

6、scatter_geo：地理坐标散点图     在地理散点图中，每一行data_frame都由地图上的符号标记表示；

7、line：线条图    在2D线图中，每行data_frame表示为2D空间中折线标记的顶点；

8、line_3d：三维线图    在三维线图中，每行数据框都表示为三维空间中多段线标记的顶点

9、line_polar：极坐标线条图        在极线图中，每行data_frame表示为极坐标中折线标记的顶点；

10、line_ternary：三元线条图        在三元线图中，每行data_frame表示为三元坐标中折线标记的顶点；

11、line_mapbox：地图线条图 在Mapbox线图中，每一行data_frame表示为Mapbox地图上折线标记的顶点；

12、line_geo：地理坐标线条图        在地理线图中，每一行data_frame表示为地图上折线标记的顶点；

13、area：堆积区域图        在堆积区域图中，每行data_frame表示为2D空间中折线标记的顶点。连续折线之间的区域被填充；

14、bar：条形图     在条形图中，每行data_frame表示为矩形标记；

15、timeline：时间轴图  在时间轴图中，每一行数据框都表示为日期类型x轴上的矩形标记，从x开始到x结束。

16、bar_polar：极坐标条形图 在极坐标条形图中，每一行都data_frame表示为极坐标中的楔形标记；

17、violin：小提琴图        在小提琴图中，将data_frame每一行分组成一个曲线标记，以便可视化它们的分布；

18、box：箱形图     在箱形图中，data_frame的每一行被组合在一起成为盒须标记，以显示它们的分布；

19、strip：长条图   在长条图中，每一行data_frame表示为类别中的抖动标记；

20、histogram：直方图       在直方图中，每一行data_frame被组合在一起成为矩形标记，以可视化该值的聚合函数histfunc(例如，计数或总和)的1D分布y(或者x，如果orientation是'h'时)；

21、pie：饼图   在饼图中，数据帧的每一行表示为饼图的扇区。

22、treemap：树状图     树状图将层次数据表示为嵌套的矩形扇区。

23、sunburst：圆环图    圆环图将层次数据表示为在同心环的多个级别上布置的扇区。

24、funnel：漏斗图      在漏斗图中，数据框的每一行表示为漏斗的矩形扇区。

25、funnel_area：漏斗区域图     在漏斗区域图中，每行数据框表示为漏斗的梯形扇区。

26、scatter_matrix：矩阵散点图      在散点图矩阵(或SPLOM)中，每行data_frame由多个符号标记表示，在2D散点图的网格的每个单元格中有一个，其将每对dimensions彼此相对绘制；

27、parallel_coordinates：平行坐标图        在平行坐标图中，每行data_frame由折线标记表示，该折线标记穿过一组平行轴，每个平行轴对应一个平行轴 dimensions；

28、parallel_categories：并行类别图 在并行类别(或平行集)图中，每行data_frame与其他共享相同值的行组合，dimensions然后通过一组平行轴绘制为折线标记，每个平行轴对应一个dimensions；

29、choropleth：等高(值)区域地图    在等值区域图中，每行data_frame由地图上的彩色区域标记表示；

30、choropleth_mapbox：在Mapbox choropleth地图中，每一行的数据由Mapbox地图上的一个彩色区域表示。

31、density_contour：密度等值线图（双变量分布）    在密度等值线图中，行data_frame被组合在一起，成为轮廓标记，以可视化该值的聚合函数histfunc(例如：计数或总和)的2D分布z；

32、density_heatmap：密度热力图（双变量分布）       在密度热图中，行data_frame被组合在一起，成为彩色矩形瓦片，以可视化该值的聚合函数histfunc(例如：计数或总和)的2D分布 z；

33、density_mapbox：Mapbox密度图        在Mapbox密度图中，每一行数据帧都会影响地图上相应点周围区域的颜色强度

plotly.graph_objects为底层组件，提供了figures, traces and layout等底层接口，以便进行灵活开发。

Figure  容器

Layout  布局

Simple Traces   简单轨迹线

Distribution Traces     分布轨迹线

Finance Traces  财务轨迹线

Map Traces      地图轨迹线

Specialized Traces      特殊轨迹线

dash_html_components库包含每个HTML标签的组件类以及所有HTML参数的关键字参数。

dash_html_components和HTML属性有几点重要的不同：

1. 在HTML中，style属性是以分号分隔的字符串。在Dash中，你可以使用一个字典。

2. style字典里的键值是cameCase（驼峰样式）的，不是 text-align, 而是 textAlign。

3. HTML类属性是Dash中的className。

4. HTML标签的子项是通过children关键字参数指定的。

dash_core_components库包含一组更高级别的组件，如下拉列表，图形等。

dash_html_components库为所有HTML标签提供类，同时关键字参数描述HTML属性，例如style，className和ID。

dash_core_components库生成高级别的组件，如控件和图形。

请多多关注，谢谢！测试