如何使用updatemenus切换Plotly Express旭日图的数值列

问题根源 #

你的代码无法生效的核心原因是：Plotly Express生成旭日图时，已经完成了对DataFrame原始列的分层聚合计算，最终Figure对象的values属性存储的是和旭日图分层节点一一对应的数值数组，而非DataFrame的列名。直接给values传入字符串列名时，Plotly会将字符串直接作为唯一数值处理，自然无法正常渲染图表。

正确实现代码 #

import plotly.express as px

df = px.data.tips()

# 预计算两个数值列对应的旭日图全量分层数据
fig_total = px.sunburst(df, path=['day', 'time', 'sex'], values='total_bill')
fig_tip = px.sunburst(df, path=['day', 'time', 'sex'], values='tip')

updatemenus = [
    {
        'buttons': [
            {
                'method': 'restyle',
                'label': 'total_bill',
                'args': [
                    {
                        'values': [fig_total.data[0].values],
                        'ids': [fig_total.data[0].ids],
                        'labels': [fig_total.data[0].labels],
                        'parents': [fig_total.data[0].parents]
                    }
                ]
            },
            {
                'method': 'restyle',
                'label': 'tip',
                'args': [
                    {
                        'values': [fig_tip.data[0].values],
                        'ids': [fig_tip.data[0].ids],
                        'labels': [fig_tip.data[0].labels],
                        'parents': [fig_tip.data[0].parents]
                    }
                ]
            }
        ],
        'direction': 'down',
        'showactive': True
    }
]

fig = fig_total
fig.update_layout(updatemenus=updatemenus)
fig.show()

实现说明 #

• 提前生成两个数值列对应的旭日图实例，拿到分层渲染需要的四个核心属性：数值values、节点唯一标识ids、节点显示标签labels、父节点标识parents
• 按钮使用restyle方法，仅修改trace的数据属性，性能优于全量update
• 每次点击按钮时替换整组分层属性，即可完成旭日图的完整切换

内容的提问来源于stack exchange，提问作者Bernd Steinhauser