開始使用免費開始

結合 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)
編輯並執行程式碼