从 Plotly 到 Dash

使用 Dash 和 Plotly 构建仪表板

Alex Scriven

Data Scientist

第一个 Dash 应用

 

一个完整的 Dash 应用：

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)
  • 可使用 Python 功能
    • 例如，字符串插值 print("f{my_variable}")
使用 Dash 和 Plotly 构建仪表板

主要 Dash 导入

 

from dash import Dash, dcc
  • Dash 用于初始化应用
  • dcc 提供图表、输入等 UI 组件
    • 我们的应用仅用一个组件
    • 后续课程会用更多组件
使用 Dash 和 Plotly 构建仪表板

应用布局

 

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

 

  • 使用 Dash() 创建应用对象
  • 设置 app.layout
    • 使用 dcc.Graph()
      • figure = 要渲染的 Plotly 图形
      • id = 之后用于回调的重要标识
使用 Dash 和 Plotly 构建仪表板

运行应用

 

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

 

  • 从命令行运行脚本
    • 即在命令行执行 python my_app.py
  • debug：测试时提供反馈
使用 Dash 和 Plotly 构建仪表板

我们的应用

 

  • 通过浏览器访问，如 Google Chrome

  • 服务运行时，更新并保存 .py 文件，可在浏览器实时查看变化

运行 Dash 应用后终端中的截图。黑底白字显示脚本中提到的详细信息。

使用 Dash 和 Plotly 构建仪表板

浏览器中的应用

一个水平条形图的动图：x 轴为总销售额，y 轴为国家。与上一课相同的图，但在 Chrome 浏览器中，地址栏显示服务器地址。鼠标悬停在图上并点击地址栏以展示服务器存在。

使用 Dash 和 Plotly 构建仪表板

DataCamp 中的 Dash

 

  • 与其他 DataCamp 练习的差异：
    • 练习顶部有设置代码
    • 一次性整体执行（非逐行）
    • 代码更长
  • 完整可用的仪表盘（可展开窗口查看）

运行后的 Dash 编码练习顶部截图，突出用于展开 HTML 输出以全屏查看应用的按钮。

使用 Dash 和 Plotly 构建仪表板

Passons à la pratique !

使用 Dash 和 Plotly 构建仪表板

Preparing Video For Download...