BaşlayınÜcretsiz Başlayın

Dash'e bir HTML listesi ekleme

Masan-da çalışırken, Pazarlama ekibinden biri hazırladığın son küçük panoyu gördü ve onlar için de bir tane oluşturmanı istedi. Toplam satış tutarına göre en üst kategorilerin çubuk grafiğini ve hemen altında da hızlıca göz atmak için en üst birkaç kategoriyi belirten bir liste istiyorlar.

Bazı stil notları da var, ancak HTML ve Dash konusunda son çalışmalarını düşününce hepsi bilgi alanın içinde görünüyor.

Görevin, oluşturduğun panoyu genişleterek en üst kategorileri ve satış hacimlerini içeren bir liste eklemek.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • Satır 20'nin altına Dash kullanarak sıralı bir liste oluştur.
  • Satır 22'nin altındaki sıralı listeye num1_cat ve num2_cat değişkenlerini satış hacimleriyle birlikte içeren iki liste öğesi ekle.
  • Telif hakkı notu kendi satırında görünsün diye satır 26'nın altına bir satır sonu ekle.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)
Kodu Düzenle ve Çalıştır