Mulai sekarangMulai gratis

Memberi Gaya pada aplikasi Dash dengan CSS

Saatnya memaksimalkan kekuatan CSS dan membawa dasbor Anda ke level berikutnya. Anda telah memikirkan cara mempercantik dasbor pemasaran yang Anda buat dan memiliki beberapa ide untuk ditunjukkan kepada para pemangku kepentingan bisnis.

Menyesuaikan ukuran grafik dan logo serta menambahkan warna latar yang menarik pada berbagai elemen akan membuatnya lebih hidup!

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Atur ukuran logo menjadi 215px lebar dan 240px tinggi di bawah baris 16.
  • Atur ukuran grafik batang menjadi 500px lebar dan 350px tinggi di bawah baris 21.
  • Tambahkan warna latar lightgrey pada pemberitahuan hak cipta di bawah baris 30.

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)
top_cat = ecom_category.loc[0]['Minor Category']
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'}, 'paper_bgcolor':'rgb(224, 255, 252)'})         

app = Dash()

app.layout = [
    html.Img(
    	src=logo_link,
    	# Set the size of the logo
    	style={'____':'____', '____':'____'}), 
    html.H1('Top Sales Categories'),
	dcc.Graph(
		figure=ecom_bar,
        # Set the size of the bar graph
		style={'____':'____', '____':'____', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I(
		'Copyright E-Com INC',
    	# Add a background color to the copyright notice
    	style={'____':'____'})])
    ]

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