Mulai sekarangMulai gratis

Menambahkan logo dan catatan

Meskipun sebuah gambar (atau grafik!) bernilai seribu kata, terkadang sebuah dashboard memerlukan catatan penjelas tambahan. Untungnya, Anda telah mengasah keterampilan untuk menambahkan dan memformat teks, serta menambahkan gambar dan struktur lebih lanjut ke aplikasi Dash Anda.

Mari buat dashboard yang menyertakan logo perusahaan, satu grafik, dan beberapa catatan penjelas singkat.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Tambahkan logo perusahaan menggunakan URL logo_link di bawah baris 13.
  • Setelah teks yang disediakan pada baris 20, tambahkan variabel top_country dalam tebal.
  • Di bawah baris 24, tambahkan pemberitahuan hak cipta perusahaan ' Copyright E-Com INC' dalam miring.

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_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False)
top_country = ecom_bar.loc[0]['Country']            
bar_fig_country = px.bar(ecom_bar, x='Total Sales ($)', y='Country', color='Country', color_discrete_map={'United Kingdom':'lightblue', 'Germany':'orange', 'France':'darkblue', 'Australia':'green', 'Hong Kong':'red'})         
    
app = Dash()

app.layout = [
  # Add the company logo
  html.____(src=____),
  html.H1('Sales by Country'),
  dcc.Graph(
    figure=bar_fig_country,
    style={'width':'750px', 'margin':'auto'}),
  html.Span(children=[
    # Add the top country text
    'This year, the most sales came from: ', 
    html.____(____),
    html.Br(),
    # Italicize copyright notice
    html.____(' Copyright E-Com INC')])
    ]

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