เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

การรวม HTML และ Dash เข้าด้วยกัน

คุณได้ทำงานร่วมกับบริษัท e-commerce เพื่อช่วยสร้างภาพข้อมูล และตอนนี้ถึงเวลายกระดับการนำเสนอแล้ว

เป้าหมายคือแสดงกราฟเส้นและกราฟแท่งที่สร้างไว้ก่อนหน้า ได้แก่ line_graph และ bar_graph ในแดชบอร์ด Dash เดียวกัน พร้อมเพิ่มชื่อเรื่องที่ด้านบนของ layout เพื่อให้ดูสมบูรณ์

กราฟเส้นและกราฟแท่ง (line_graph และ bar_graph) ได้ถูกสร้างขึ้นใหม่ให้แล้ว

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • เพิ่มชื่อเรื่องให้กับ Dash app โดยใช้ .H1() ที่มีข้อความว่า 'Sales by Country & Over Time'
  • เพิ่มกราฟ line_graph และ bar_graph ลงใน layout ของ Dash app

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด