元素间交互

使用 Dash 和 Plotly 构建仪表板

Alex Scriven

Data Scientist

什么是元素间？

之前：与输入交互以触发图形变化
现在：与图形交互以触发另一图形变化

两种用法：
- 悬停图形
- 点击数据点

hoverData 属性

# 创建图形与布局
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("The Hover Data:"),
   html.P(id='text_output')

# 设置回调 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

首次悬停

发生了什么：

用户悬停：图形的 hoverData 属性改变
回调接收并返回到 .P() 标签
我们可查看该点的信息

一个水平条形图动图：总销售额（x 轴）对国家（y 轴）。下方显示"hover data"，初始为"none"。当鼠标悬停在澳大利亚的条上时，none 变为一个字典，包含该点的国家标签和值。

当心信息缺失

目标：在回调中使用"country"（过滤并重绘图）
- 先前示例——在 hoverData 中
看此散点图（更新了图形类型与相关 ID）
- 没有国家！

一个散点图动图：总销售额（x 轴）对销售量（y 轴），每个点代表不同国家。下方显示"hover data"，初始为"none"。当鼠标悬停在澳大利亚上时，none 变为一个字典，包含该点的两个数值，但关键是并不包含 Australia。

添加自定义数据

ecom_scatter = px.scatter(ecom_data, 
    x='Total Sales ($)', 
    y='Sales Volume', color='Country',
    custom_data=['Country'])

现在 customData 含有国家！

一个散点图动图：总销售额（x 轴）对销售量（y 轴），每个点代表一个国家。下方显示"hover data"，初始为"none"。当鼠标悬停在澳大利亚上时，none 变为一个字典，包含该点的两项数值；这次在 customdata 属性中含有 Australia。

点击呢？

也可在点击点时触发回调
- 只需改一处（clickData 属性）

@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'clickData'))
def capture_hover_data(clickData):
    return str(clickData)

注意：不会立刻出现

一个水平条形图动图：总销售额（x 轴）对国家（y 轴）。下方显示"hover data"，初始为"none"。当鼠标悬停在澳大利亚的条上时，none 不变；当点击该条后，none 变为一个字典，包含该点的国家标签和值。

Passons à la pratique !

使用 Dash 和 Plotly 构建仪表板