Mulai sekarangMulai gratis

Menggabungkan HTML dan Dash

Anda telah bekerja dengan sebuah perusahaan e-commerce untuk membantu memvisualisasikan data mereka, dan sekarang saatnya meningkatkan penyajiannya.

Tujuan Anda adalah menampilkan bagan garis dan batang yang sebelumnya Anda buat, line_graph dan bar_graph, bersama-sama dalam satu dasbor Dash. Agar terasa lengkap, Anda juga akan menambahkan judul di bagian atas tata letak.

Bagan garis dan batang (line_graph dan bar_graph) telah dibuat ulang untuk Anda.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Tambahkan judul ke aplikasi Dash Anda sebagai .H1() yang berisi teks 'Sales by Country & Over Time'.
  • Tambahkan figur line_graph dan bar_graph ke tata letak aplikasi Dash.

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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)
Edit dan Jalankan Kode