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

Karanlık Moda Geçiş

Yazılım ürünlerinde ve web sayfalarında yaygın bir eğilim, gözler için daha rahat olan ve bazı kişilerin tercih ettiği 'Karanlık Mod'dur. Karanlık Mod, öğelerin arka planının siyah, tüm metin renginin ise beyaz olduğu durumdur.

Görevin, bir önceki egzersizde oluşturduğun panoyu alıp 'karanlık tarafa' geçirmek. Bu, grafiğin ve HTML öğelerinin arka plan ve metin renklerini değiştirmeni gerektirecek.

Gerekli grafiklerin oluşturulması da dahil olmak üzere önceki panonun çoğu sağlandı. Ancak panoyu Karanlık Mod'a geçirmek için yapılması gereken kilit işler var. Bu egzersizde renkler için RGB kodları yerine kelimeleri kullanabilirsin.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

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

Egzersiz talimatları

  • Çubuk grafiğin yazı tipinin rengini, 10 numaralı satırın altında Karanlık Mod'a uyacak şekilde ayarla (black arka plan, white metin).
  • 16 numaralı satırın altında logo_link değişkenini kullanarak yeni logoyu 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/1c95273e21a54b5ca48e0b03cc0c1faeafb3d7cd/e-comlogo_white.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')

# Set the font color of the bar chart
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'black', 'font': {'color':'____'}})

app = Dash()

app.layout = [
    # Add the new logo
    html.Img(
    	src=____,
    	style={'width':'165px', 'height':'50px'}),
    html.H1('Top Sales Categories'),
    dcc.Graph(
    	figure=ecom_bar,
    	style={'width':'500px', 'height':'350px', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I('Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Kodu Düzenle ve Çalıştır