悬停生成关键统计

在最近一次向电商公司的经理演示您的成果后，您收到了一项为该相关方制作仪表板的请求。过多的可视化和文本是绝对不允许的。

他们希望仪表板具备高度的交互性。他们要求提供一个散点图，当鼠标悬停其上时，在右侧的文本框中显示一些额外的关键统计信息。当悬停在散点图上的新点时，该内容应随之更新。

本练习是课程的一部分

使用 Dash 和 Plotly 构建仪表板

查看课程

练习说明

在第 8 行下方，将 'Country' 列添加到散点图的 custom_data 参数中，使其出现在 hoverData 属性里。
在第 28 行下方创建一个回调，将 scatter_fig 图表与 text_output 元素连接起来，并在悬停散点图时触发。

交互式实操练习

通过完成这段示例代码来试试这个练习。

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)

编辑并运行代码