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

HTML ve Dash'i birleştirmek

Bir e-ticaret şirketiyle verilerini görselleştirmelerine yardımcı oluyordun ve şimdi sunumu bir seviye yükseltme zamanı.

Hedefin, daha önce oluşturduğun line_graph ve bar_graph çizgi ve çubuk grafiklerini tek bir Dash kontrol panelinde birlikte göstermek. Tamamlanmış bir his vermesi için, yerleşimin en üstüne bir başlık da ekleyeceksin.

Çizgi ve çubuk grafikler (line_graph ve bar_graph) senin için yeniden oluşturuldu.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

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

Egzersiz talimatları

  • Dash uygulamana .H1() olarak 'Sales by Country & Over Time' metnini içeren bir başlık ekle.
  • line_graph ve bar_graph figürlerini Dash uygulamasının yerleşimine (layout) ekle.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

from dash import Dash, dcc, html
import pandas as pd
import plotly.express as px
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby(['Year-Month','Country'])['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
line_graph = px.line(data_frame=ecom_line, x='Year-Month', y='Total Sales ($)', title='Total Sales by Month', color='Country')
bar_graph = px.bar(data_frame=ecom_bar, x='Total Sales ($)', y='Country', orientation='h',title='Total Sales by Country')

app = Dash()

# Set up the layout
app.layout = [
  # Add a H1
  html.____('____'),
  # Add both graphs
  dcc.____(id='line_graph', figure=____),
  dcc.____(id='bar_graph', figure=____)
  ]

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