แสดงสถิติสำคัญเมื่อ hover
หลังจากที่นำเสนอผลงานให้ผู้จัดการในบริษัทอีคอมเมิร์ซดู คุณได้รับคำขอให้สร้าง dashboard สำหรับผู้บริหารรายนี้โดยเฉพาะ โดยมีข้อกำหนดชัดเจนว่าไม่ต้องการให้มีกราฟหรือข้อความมากเกินไป
แต่ต้องการให้ dashboard มีความสามารถในการโต้ตอบสูง โดยขอให้มี scatter plot ที่เมื่อเลื่อนเมาส์ชี้ที่จุดข้อมูล จะแสดงสถิติสำคัญเพิ่มเติมในกล่องข้อความด้านขวา และเนื้อหาในกล่องนั้นจะเปลี่ยนไปตามจุดที่ชี้อยู่
แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร
การสร้างแดชบอร์ดด้วย Dash และ Plotly
คำแนะนำการฝึกหัด
- เพิ่มคอลัมน์
'Country'ลงในพารามิเตอร์custom_dataของ scatter plot ใต้บรรทัดที่8เพื่อให้คอลัมน์นี้ปรากฏในพร็อพเพอร์ตี้hoverData - สร้าง callback ใต้บรรทัดที่
28เพื่อเชื่อมกราฟscatter_figกับ elementtext_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)