Slider สำหรับข้อมูลยอดขาย
date picker ที่สร้างขึ้นช่วยให้การวิเคราะห์แนวโน้มและรูปแบบในข้อมูลของบริษัท e-commerce ระดับโลกมีประสิทธิภาพมากขึ้น และขณะนี้มีคำขอเพิ่มเติมให้แสดงว่าหมวดหมู่ใดขับเคลื่อนออร์เดอร์ที่มีมูลค่าสูง
บริษัทต้องการให้สร้างเครื่องมือที่ผู้ใช้สามารถเลือกค่าได้อิสระ แล้วกราฟจะแสดงจำนวนยอดขายที่มีมูลค่าออร์เดอร์สูงกว่าค่านั้น โดยแยกตามหมวดหมู่หลัก
การใช้ range input จะตอบโจทย์นี้ได้เป็นอย่างดี
แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร
การสร้างแดชบอร์ดด้วย Dash และ Plotly
คำแนะนำการฝึกหัด
- เพิ่ม slider component ชื่อ
dcc.Sliderโดยใช้ identifier ว่าvalue_sliderใต้บรรทัดที่16เพื่อให้เลือกค่าต่ำสุดของออร์เดอร์ - กำหนดพารามิเตอร์
valueของ slider เป็น0ใต้บรรทัดที่20 - กำหนดพารามิเตอร์
stepของ slider เป็น50ใต้บรรทัดที่22
แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ
ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์
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'
app = Dash()
app.layout = [
html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
html.H1('Sales breakdowns'),
html.Div([
html.H2('Controls'),
html.Br(),
html.H3('Minimum OrderValue Select'),
# Add a slider input
____(id='value_slider',
min=ecom_sales['OrderValue'].min(),
max=ecom_sales['OrderValue'].max(),
# Set the starting value of the slider
____=____,
# Set the step increment of the slider
____=____,
vertical=False)],
style={'width':'350px', 'height':'350px', 'display':'inline-block', 'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
html.Div([
dcc.Graph(id='sales_cat'),
html.H2('Sales by Major Category', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
style={'width':'700px','display':'inline-block'})
]
@callback(
Output(component_id='sales_cat', component_property='figure'),
Input(component_id='value_slider', component_property='value')
)
def update_plot(min_val):
sales = ecom_sales.copy(deep=True)
if min_val:
sales = sales[sales['OrderValue'] >= min_val]
ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].size().reset_index(name='Total Sales Volume')
bar_fig_major_cat = px.bar(
title=f'Sales with order value: {min_val}',data_frame=ecom_bar_major_cat, orientation='h',
x='Total Sales Volume', y='Major Category')
return bar_fig_major_cat
if __name__ == '__main__':
app.run(debug=True)