Plotly Dash下拉菜单切换饼图时数据匹配异常问题求助

你的问题核心是下拉按钮的visible数组索引与饼图在data列表中的顺序完全不对应，同时存在未定义变量的错误，导致切换后数据和hover文本错位。

错误分析 #

1. 你在figure.data里定义的饼图顺序是：
   • 0: WR AMXG
   • 1: WR CMXG
   • 2: WR EMXG
   • 3: OO AMXG
   • 4: OO CMXG
   • 5: OO EMXG
   • 6: OO MMXG
   • 7: OO PMXG
   • 8: OC AMXG
   • 9: OC CMXG
   • 10: OC PMXG
     但下拉按钮的visible数组却错误地指向了完全不对应的索引，比如第一个按钮"OC CMXG"设置visible[1]=True，实际指向的是WR CMXG的饼图，自然数据和hover文本不匹配。
2. 布局里使用了未定义的fig变量，应该改为你创建的plot对象。
3. active参数设置为1，但对应第二个按钮，若你默认想显示OC CMXG，应该设置active=0（对应第一个按钮）。

修正后的完整代码 #

import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import plotly.express as px
import dash_bootstrap_components as dbc
import flask
import pandas as pd
import time
import os
import pandas as pd
import plotly.express as px
from plotly import graph_objects as go
import random

server = flask.Flask('app')
server.secret_key = os.environ.get('secret_key', 'secret')

# Define app object with url_base_pathname value from setup.sh
app = dash.Dash('app', server=server,external_stylesheets=[dbc.themes.VAPOR], url_base_pathname='path')

x = ['To Be Run', 'Ran with Errors', 'Ran Error Free'] 

# 明确饼图顺序，方便对应下拉按钮
plot = go.Figure(data=[ 
       go.Pie(name='WR AMXG', labels=x, values=[random.randrange(50, 200, 3) for _ in range(3)]),
       go.Pie(name='WR CMXG', labels=x, values=[random.randrange(50, 200, 3) for _ in range(3)]),
       go.Pie(name='WR EMXG', labels=x, values=[random.randrange(50, 200, 3) for _ in range(3)]),  
       go.Pie(name='OO AMXG', labels=x, values=[random.randrange(50, 200, 3) for _ in range(3)]), 
       go.Pie(name='OO CMXG', labels=x, values=[random.randrange(50, 200, 3) for _ in range(3)]),
       go.Pie(name='OO EMXG', labels=x, values=[random.randrange(50, 200, 3) for _ in range(3)]),
       go.Pie(name='OO MMXG', labels=x, values=[random.randrange(50, 200, 3) for _ in range(3)]),
       go.Pie(name='OO PMXG', labels=x, values=[50,100,150]),
       go.Pie(name='OC AMXG', labels=x, values=[80,52,678]), 
       go.Pie(name='OC CMXG', labels=x, values=[56, 123, 982]),
       go.Pie(name='OC PMXG', labels=x, values=[100, 200, 500])                
]) 

# 修正下拉按钮的visible索引，确保每个按钮只显示对应顺序的饼图
plot.update_layout( 
    updatemenus=[ 
        dict( 
            active=0,  # 默认激活第一个按钮（OC CMXG）
            buttons=list([
                # OC CMXG - 对应data列表第9个元素（索引9）
                dict(label="OC CMXG", 
                     method="update", 
                     args=[{"visible": [False]*9 + [True] + [False]}, 
                           {"title": "OC CMXG"}]),  
                # OC PMXG - 对应data列表第10个元素（索引10）
                dict(label="OC PMXG", 
                     method="update", 
                     args=[{"visible": [False]*10 + [True]}, 
                           {"title": "OC PMXG"}]), 
                # OC AMXG - 对应data列表第8个元素（索引8）
                dict(label='OC AMXG',
                     method="update",
                     args=[{"visible": [False]*8 + [True] + [False]*2},
                          {"title":"OC AMXG"}]), 
                # OO PMXG - 对应data列表第7个元素（索引7）
                dict(label='OO PMXG',
                     method="update",
                     args=[{"visible": [False]*7 + [True] + [False]*3},
                          {"title":"OO PMXG"}]), 
                # OO MMXG - 对应data列表第6个元素（索引6）
                dict(label='OO MMXG',
                     method="update",
                     args=[{"visible": [False]*6 + [True] + [False]*4},
                          {"title":"OO MMXG"}]), 
                # OO EMXG - 对应data列表第5个元素（索引5）
                dict(label='OO EMXG',
                     method="update",
                     args=[{"visible": [False]*5 + [True] + [False]*5},
                          {"title":"OO EMXG"}]), 
                # OO CMXG - 对应data列表第4个元素（索引4）
                dict(label='OO CMXG',
                     method="update",
                     args=[{"visible": [False]*4 + [True] + [False]*6},
                          {"title":"OO CMXG"}]), 
                # OO AMXG - 对应data列表第3个元素（索引3）
                dict(label='OO AMXG',
                     method="update",
                     args=[{"visible": [False]*3 + [True] + [False]*7},
                          {"title":"OO AMXG"}]), 
                # WR EMXG - 对应data列表第2个元素（索引2）
                dict(label='WR EMXG',
                     method="update",
                     args=[{"visible": [False]*2 + [True] + [False]*8},
                          {"title":"WR EMXG"}]), 
                # WR CMXG - 对应data列表第1个元素（索引1）
                dict(label='WR CMXG',
                     method="update",
                     args=[{"visible": [False] + [True] + [False]*9},
                          {"title":"WR CMXG"}]), 
                # WR AMXG - 对应data列表第0个元素（索引0）
                dict(label='WR AMXG',
                     method="update",
                     args=[{"visible": [True] + [False]*10},
                          {"title":"WR AMXG"}])
            ]), 
        ) 
]) 
app.layout = html.Div(children=[
  dbc.Row([
   dbc.Col(dcc.Graph(id='graph2', figure=plot, style={'width': '90%'}))
  ]), 
])

if __name__ == '__main__':
    app.run(port=8060)

关键修正点 #

• 每个下拉按钮的visible数组严格对应figure.data中饼图的索引，确保只显示目标饼图。
• 修正了布局中未定义的fig变量，替换为正确的plot对象。
• 调整active参数为0，对应默认显示的第一个按钮（可根据需求修改）。

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