Mulai sekarangMulai gratis

Menambahkan daftar HTML ke Dash

Saat Anda sedang bekerja di meja, seseorang dari departemen Pemasaran melihat dasbor kecil terakhir yang Anda buat dan meminta Anda membuat satu untuk mereka. Mereka menginginkan bagan batang kategori teratas berdasarkan total nilai penjualan, dengan sebuah daftar di bawahnya yang menyoroti beberapa kategori teratas untuk dilihat sekilas.

Mereka juga memiliki beberapa catatan gaya, tetapi semuanya tampak sesuai dengan pengetahuan Anda, mengingat pekerjaan Anda baru-baru ini dengan HTML dan Dash.

Tugas Anda adalah memperluas dasbor yang Anda buat agar mencakup daftar kategori teratas dan volume penjualannya.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Buat daftar berurutan di bawah baris 20 menggunakan Dash.
  • Tambahkan dua elemen daftar yang memuat variabel num1_cat dan num2_cat beserta volume penjualannya ke dalam daftar berurutan di bawah baris 22.
  • Tambahkan pemisah baris di bawah baris 26 agar pemberitahuan hak cipta muncul pada baris tersendiri.

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}})             

app = Dash()

app.layout = [
    html.Img(src=logo_link),
    html.H1('Top Sales Categories'),
    dcc.Graph(figure=ecom_bar),
    html.Span(children=[
    'The top 2 sales categories were:',
    # Set up an ordered list
    html.____(children=[
      	# Add two list elements with the top category variables
        html.____(children=[____, ' with ', num1_salesvol, ' sales volume']),
        html.____(children=[____, ' with ', num2_salesvol, ' sales volume'])
    ], style={'width':'350px', 'margin':'auto'}),
    # Add a line break before the copyright notice
    html.____(),
    html.I('Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Edit dan Jalankan Kode