Python Plotly饼图按钮restyle失效问题排查与解决

问题现象 #

在Python Django环境中配置Plotly饼图时，通过按钮调用restyle方法尝试更新饼图的labels、marker颜色及values，但点击按钮后出现异常：

• 饼图数值未生效
• 图例标签变为'0'和'1'
• 饼图样式未按预期更新
  对比生成的JavaScript代码与官方示例未发现明显差异，最终通过修正按钮args参数格式解决问题。

原错误代码 #

layout = go.Layout(
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)',
    font_color=\"white\",
    legend=dict(
        orientation=\"v\",
        yanchor=\"bottom\",
        y=0.05,
        xanchor=\"left\",
        x=1.05,
        traceorder='reversed'
    ),
    height=300,
    margin=dict(l=2, r=2, t=1, b=1),
)
...
fig = go.Figure(go.Pie(labels=['Automatic', 'Error'], values=[13,11],
                       marker=dict(colors=['#000000','#555555']), sort=False),  layout)
fig.update_traces(textposition='inside',textinfo='value')
fig.update_layout(uniformtext_minsize=12, uniformtext_mode='hide')
button_layer_1_height = 1.08
fig.update_layout(
    updatemenus=[
        dict(
            buttons=list([
                 dict(
                     args=[
                        {'labels': ['test1', 'test2']},
                        {'marker': dict(colors=['#999999', '#222222'])},
                        {'values': [23,1]}
                     ],
                     label='firstButton',
                     method=\"restyle\"
                 ),
                 dict(
                     args=[
                        {'labels': ['test3', 'test4']},
                        {'marker': dict(colors=['#333333', '#666666'])},
                        {'values': [10,14]}
                     ],
                     label='SecondButton',
                     method=\"restyle\",
                 ),
             ]),
            direction=\"down\",
            pad={\"r\": 10, \"t\": 10},
            showactive=True,
            x=0.1,
            xanchor=\"left\",
            y=button_layer_1_height,
            yanchor=\"top\",
        ),
    ]
)

生成的JavaScript代码 #

\"updatemenus\":[{\"buttons\":[
{\"args\":[{\"labels\":[\"test1\", \"test2\"]},{\"marker\":{\"colors\":[\"#999999\", \"#222222\"]}},{\"values\":[23,1]}],\"label\":\"FirstButton\",\"method\":\"restyle\"},
{\"args\":[{\"labels\":[\"test3\", \"test4\"]},{\"marker\":{\"colors\":[\"#333333\", \"#666666\"]}},{\"values\":[10,14]}],\"label\":\"SecondButton\",\"method\":\"restyle\"}],
\"direction\":\"down\",\"pad\":{\"r\":10,\"t\":10},\"showactive\":true,\"x\":0.1,\"xanchor\":\"left\",\"y\":1.08,\"yanchor\":\"top\"}]},                        {\"responsive\": true}                    )                }; 

解决方案 #

核心问题在于restyle方法的args参数格式错误，需将labels、marker.colors、values的值包裹在双层数组中，同时将所有更新项合并为单个字典传入args：

buttons=list([
                 dict(
                     args=[
                        {'labels': [['test1', 'test2']],
                        'marker': dict(colors=[['#999999', '#222222']]),
                        'values': [[23,1]]}
                     ],
                     label='firstButton',
                     method=\"restyle\"
                 ),
                 dict(
                     args=[
                        {'labels': [['test3', 'test4']],
                        'marker': dict(colors=[['#333333', '#666666']]),
                        'values': [[10,14]]}
                     ],
                     label='SecondButton',
                     method=\"restyle\",
                 ),
             ]),

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