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

Bir Dash uygulamasını CSS ile stillendirme

CSS’in gücünü ortaya çıkarıp panolarını bir üst seviyeye taşıma zamanı. Oluşturduğun pazarlama panosunu nasıl canlandırabileceğini düşünüyordun ve iş paydaşlarına göstermek için birkaç fikrin var.

Grafiğin ve logonun boyutlarını ayarlayıp çeşitli öğelere hoş arka plan renkleri eklemek gerçekten havalı duracak!

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

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

Egzersiz talimatları

  • 16 numaralı satırın altına logonun genişliğini 215px, yüksekliğini 240px olarak ayarla.
  • 21 numaralı satırın altına çubuk grafiğin genişliğini 500px, yüksekliğini 350px olarak ayarla.
  • 30 numaralı satırın altına telif hakkı notuna lightgrey arka plan rengi 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)
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)
Kodu Düzenle ve Çalıştır