开始使用免费开始使用

结合 HTML 与 Dash

您一直在为一家电商公司可视化他们的数据，现在该提升展示效果了。

您的目标是将之前创建的折线图和柱状图 line_graph 与 bar_graph 一起显示在同一个 Dash 仪表板中。为使布局更完整，您还需要在顶部添加一个标题。

折线图和柱状图（line_graph 与 bar_graph）已为您重新创建。

本练习是课程的一部分

使用 Dash 和 Plotly 构建仪表板

查看课程

练习说明

  • 在 Dash 应用中添加标题，使用一个 .H1()，文本为 'Sales by Country & Over Time'。
  • 将 line_graph 和 bar_graph 这两个图形添加到 Dash 应用的布局中。

交互式实操练习

通过完成这段示例代码来试试这个练习。

from dash import Dash, dcc, html
import pandas as pd
import plotly.express as px
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby(['Year-Month','Country'])['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
line_graph = px.line(data_frame=ecom_line, x='Year-Month', y='Total Sales ($)', title='Total Sales by Month', color='Country')
bar_graph = px.bar(data_frame=ecom_bar, x='Total Sales ($)', y='Country', orientation='h',title='Total Sales by Country')

app = Dash()

# Set up the layout
app.layout = [
  # Add a H1
  html.____('____'),
  # Add both graphs
  dcc.____(id='line_graph', figure=____),
  dcc.____(id='bar_graph', figure=____)
  ]

if __name__ == '__main__':
    app.run(debug=True)
编辑并运行代码