เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

แสดงสถิติสำคัญเมื่อ hover

หลังจากที่นำเสนอผลงานให้ผู้จัดการในบริษัทอีคอมเมิร์ซดู คุณได้รับคำขอให้สร้าง dashboard สำหรับผู้บริหารรายนี้โดยเฉพาะ โดยมีข้อกำหนดชัดเจนว่าไม่ต้องการให้มีกราฟหรือข้อความมากเกินไป

แต่ต้องการให้ dashboard มีความสามารถในการโต้ตอบสูง โดยขอให้มี scatter plot ที่เมื่อเลื่อนเมาส์ชี้ที่จุดข้อมูล จะแสดงสถิติสำคัญเพิ่มเติมในกล่องข้อความด้านขวา และเนื้อหาในกล่องนั้นจะเปลี่ยนไปตามจุดที่ชี้อยู่

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • เพิ่มคอลัมน์ 'Country' ลงในพารามิเตอร์ custom_data ของ scatter plot ใต้บรรทัดที่ 8 เพื่อให้คอลัมน์นี้ปรากฏในพร็อพเพอร์ตี้ hoverData
  • สร้าง callback ใต้บรรทัดที่ 28 เพื่อเชื่อมกราฟ scatter_fig กับ element text_output โดยให้ทำงานเมื่อเลื่อนเมาส์ชี้ที่ scatter plot

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

from dash import Dash, dcc, html, Input, Output, callback
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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})

# Add the country data to the scatter plot
ecom_scatter = px.scatter(ecom_country, x='Total Sales ($)', y='Sales Volume', color='Country', width=350, height=400, ____=['____'])
ecom_scatter.update_layout({'legend':dict(orientation='h', y=-0.5,x=1, yanchor='bottom', xanchor='right'), 'margin':dict(l=20, r=20, t=25, b=0)})

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px' }),
  html.H1('Sales breakdowns'),
  html.Div([
    html.H2('Sales by Country'),
    dcc.Graph(id='scatter_fig', figure=ecom_scatter)],
    style={'width':'350px', 'height':'500px', 'display':'inline-block', 
           'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
    html.H2('Key Stats'),
    html.P(id='text_output', style={'width':'500px', 'text-align':'center'})],
    style={'width':'700px', 'height':'650px','display':'inline-block'})
]

# Trigger callback on hover
@callback(
    Output('text_output', 'children'),
    ____('scatter_fig', '____'))

def get_key_stats(hoverData):
    if not hoverData:
        return 'Hover over a country to see key stats'
    country = hoverData['points'][0]['customdata'][0]
    country_df = ecom_sales[ecom_sales['Country'] == country]
    top_major_cat = country_df.groupby('Major Category').agg('size').reset_index(name='Sales Volume').sort_values(by='Sales Volume', ascending=False).reset_index(drop=True).loc[0,'Major Category']
    top_sales_month = country_df.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False).reset_index(drop=True).loc[0,'Year-Month']
    stats_list = [
      f'Key stats for : {country}', html.Br(),
      f'The most popular Major Category by sales volume was: {top_major_cat}', html.Br(),
      f'The highest sales value month was: {top_sales_month}'
    ]
    return stats_list

if __name__ == '__main__':
    app.run(debug=True)
แก้ไขและรันโค้ด