带有百分比的进度饼图子图答案

【问题标题】：带有百分比的进度饼图子图
【发布时间】：2022-01-23 13:27:14
【问题描述】：

我正在尝试制作带有完成百分比的圆环图。以下是我的代码：

import pandas as pd
import numpy as np
import plotly.graph_objects as go
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc
    
df3 = pd.DataFrame({'Branch': ['Hanoi','Hanoi','Hanoi','Hochiminh','Hochiminh','Hochiminh','Danang','Danang','Danang'],
                'Name': ['Sales','Card','Loan','Sales','Card','Loan','Sales','Card','Loan'],
                'KPI': [1000,1200,8000,1000,1200,8000,1000,1200,8000],
                'Complete' : [982,1015,7105,780,1120,7600,815,1150,6800]})
df3['Percent'] = ((df3['Complete']/df3['KPI'])*100).round(decimals=2)
    
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
    
app.layout = html.Div([dbc.Row(dbc.Col(html.H2('KPI Subplots',className='text-center text primary, mb-3'))),
            dbc.Row([
                dbc.Col([html.H5('Sales KPI',className='text-center'),
                    dcc.Graph(id='credit_fluctuation',figure={},style={'height':300}),
                    ],width={'size':3,"offset":0,'order':1},),            
                dbc.Col([html.H5('Card KPI',className='text-center'),
                    dcc.Graph(id='credit_fluctuation_2',figure={},style={'height':300}),
                    ],width={'size':3,"offset":0,'order':1}),
                dbc.Col([html.H5('Loan KPI',className='text-center'),
                    dcc.Graph(id='credit_fluctuation_3',figure={},style={'height':300}),
                    ],width={'size':3,"offset":0,'order':1}),   
                dbc.Col([html.H5('Drop Down',className='text-center'),
                    dcc.Dropdown(id='br_cd_2',placeholder="Please select branch code",
                                    options=[{'label':x,'value':x} for x in df3.sort_values('Branch')['Branch'].unique()],
                                    value='Select',
                                    multi=False,
                                    disabled=False,
                                    clearable=True,
                                    searchable=True),
                        ],width={'size':2,"offset":0,'order':1})
            ]),
    
    ])
    
@app.callback(
            Output(component_id='credit_fluctuation',component_property='figure'),
            [Input(component_id='br_cd_2',component_property='value')])
    
def build_graph(branch_cd):
    global dff
    if not branch_cd or 'Select' in branch_cd:
        dff = df3[(df3['Name']=="Sales")]
        dff = pd.pivot_table(dff,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
        dff['Percent'] = ((dff['Complete']/dff['KPI'])*100).round(decimals=2)
        val=dff.iloc[0,3]
        
    else:
        dff = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
        dff = dff[(dff['Name']=='Sales')]
        val=dff.iloc[0,4]
        
    fig=go.Figure(data=[go.Pie(labels=['',''],
                              values=[val,100-val],
                              hole=0.85,
                              textinfo='none',
                              marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                              )],
                 layout=go.Layout(annotations=[{'text':str(val)+"%",'x':0.5,'y':0.5,'font_size':20,'showarrow':False}],
                                 showlegend=False))
    return fig
    
@app.callback(
            Output(component_id='credit_fluctuation_2',component_property='figure'),
            [Input(component_id='br_cd_2',component_property='value')])
    
def build_graph(branch_cd_2):
    global dff2
    if not branch_cd_2 or 'Select' in branch_cd_2:
            dff2 = df3[(df3['Name']=="Card")]
            dff2 = pd.pivot_table(dff2,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
            dff2['Percent'] = ((dff2['Complete']/dff2['KPI'])*100).round(decimals=2)
            val2=dff2.iloc[0,3]
        
    else:
            dff2 = df3[(df3['Branch']== branch_cd_2)]#.isin(branch_cd)
            dff2 = dff2[(dff2['Name']=='Card')]
            val2=dff2.iloc[0,4]
        
    fig_2=go.Figure(data=[go.Pie(labels=['',''],
                              values=[val2,100-val2],
                              hole=0.85,
                              textinfo='none',
                              marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                              )],
                 layout=go.Layout(annotations=[{'text':str(val2)+"%",'x':0.5,'y':0.5,'font_size':20,'showarrow':False}],
                                 showlegend=False))
    return fig_2
    
@app.callback(
            Output(component_id='credit_fluctuation_3',component_property='figure'),
            [Input(component_id='br_cd_2',component_property='value')])
    
def build_graph(branch_cd_3):
    global dff3
    if not branch_cd_3 or 'Select' in branch_cd_3:
            dff3 = df3[(df3['Name']=="Loan")]
            dff3 = pd.pivot_table(dff3,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
            dff3['Percent'] = ((dff3['Complete']/dff3['KPI'])*100).round(decimals=2)
            val3=dff3.iloc[0,3]
        
    else:
            dff3 = df3[(df3['Branch']== branch_cd_3)]#.isin(branch_cd)
            dff3 = dff3[(dff3['Name']=='Loan')]
            val3=dff3.iloc[0,4]
        
    fig_3=go.Figure(data=[go.Pie(labels=['',''],
                              values=[val3,100-val3],
                              hole=0.85,
                              textinfo='none',
                              marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                              )],
                 layout=go.Layout(annotations=[{'text':str(val3)+"%",'x':0.5,'y':0.5,'font_size':20,'showarrow':False}],
                                 showlegend=False))
    return fig_3
    
    
if __name__ == "__main__":
        app.run_server(debug=False,port=8056)

实际上，使用此代码，它可以按我的意愿工作，但现在我想用subplots 来实现它，我将代码更改如下：

from plotly.subplots import make_subplots
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([   
        dbc.Row(dbc.Col(html.H2('KPI Subplots',className='text-center text primary, mb-3'))),
        dbc.Row([
            dbc.Col([html.H5('Sales KPI',className='text-center'),
                dcc.Graph(id='credit_fluctuation',figure={},style={'height':300}),
                ],width={'size':6,"offset":0,'order':1}),               
            dbc.Col([html.H5('Drop Down',className='text-center'),
                dcc.Dropdown(id='br_cd_2',placeholder="Please select branch code",
                                options=[{'label':x,'value':x} for x in df3.sort_values('Branch')['Branch'].unique()],
                                value='Select',
                                multi=False,
                                disabled=False,
                                clearable=True,
                                searchable=True),
                    ],width={'size':2,"offset":0,'order':1})
        ]),

])

@app.callback(
        Output(component_id='credit_fluctuation',component_property='figure'),
        [Input(component_id='br_cd_2',component_property='value')])

def build_graph(branch_cd):
    global dff
    if not branch_cd or 'Select' in branch_cd:
        dff = df3[(df3['Name']=="Sales")]
        dff = pd.pivot_table(dff,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
        dff['Percent'] = ((dff['Complete']/dff['KPI'])*100).round(decimals=2)
        val=dff.iloc[0,3]

        dff2 = df3[(df3['Name']=="Card")]
        dff2 = pd.pivot_table(dff2,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
        dff2['Percent'] = ((dff2['Complete']/dff2['KPI'])*100).round(decimals=2)
        val2=dff2.iloc[0,3]

        dff3 = df3[(df3['Name']=="Loan")]
        dff3 = pd.pivot_table(dff3,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
        dff3['Percent'] = ((dff3['Complete']/dff3['KPI'])*100).round(decimals=2)
        val3=dff3.iloc[0,3]
    
    else:
        dff = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
        dff = dff[(dff['Name']=='Sales')]
        val=dff.iloc[0,4]
        
        dff2 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
        dff2 = dff2[(dff2['Name']=='Card')]
        val2=dff2.iloc[0,4]    

        dff3 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
        dff3 = dff3[(dff3['Name']=='Loan')]
        val3=dff3.iloc[0,4]        
        
    fig = make_subplots(rows=1, cols=3,specs=[[{"type": "pie"}, {"type": "pie"}, {"type": "pie"}]],subplot_titles=("Sales KPI", "Card KPI", "Loan KPI"))
    
    fig.add_trace(go.Pie(labels=['',''],
                          values=[val,100-val],
                          hole=0.85,
                          textinfo='none',
                          marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                          ),row=1, col=1),
    
    fig.add_trace(go.Pie(labels=['',''],
                          values=[val2,100-val2],
                          hole=0.85,
                          textinfo='none',
                          marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                          ),row=1, col=2),
        
    fig.add_trace(go.Pie(labels=['',''],
                          values=[val3,100-val3],
                          hole=0.85,
                          textinfo='none',
                          marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                          ),row=1, col=3),     
           
    return fig

if __name__ == "__main__":
    app.run_server(debug=False,port=8057)

但我仍然找不到像第一个破折号那样显示完成百分比的方法。你能给我一个建议吗。非常感谢！

这是第一个破折号：

这是第二个破折号：

【问题讨论】：

您介意包含minimal reproducible example 吗？特别是，您应该分享您原始df 的样本。
@rpanai：嗨，我已经在我的问题中分享了我的数据框。
这个想法是通过代码共享，因此即使您删除了 github 存储库，它也可以重现。那你
@rpanai：请检查我上面编辑的代码。谢谢！

标签： python plotly

【解决方案1】：

我没有在dash环境中检查过，但我确实检查过。子图中的注释设置列表中的相应值。请参阅official reference。

fig = make_subplots(rows=1, cols=3,specs=[[{"type": "pie"}, {"type": "pie"}, {"type": "pie"}]])

fig.add_trace(go.Pie(labels=['',''],
                      values=[val,100-val],
                      hole=0.85,
                      textinfo='none',
                      marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                      ),row=1, col=1)

fig.add_trace(go.Pie(labels=['',''],
                      values=[val2,100-val2],
                      hole=0.85,
                      textinfo='none',
                      marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                      ),row=1, col=2)

fig.add_trace(go.Pie(labels=['',''],
                      values=[val3,100-val3],
                      hole=0.85,
                      textinfo='none',
                      marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                      ),row=1, col=3)
# update
fig.update_layout(annotations=[dict(text=str(val)+"%", x=0.1, y=0.5, font_size=20, showarrow=False),
                               dict(text=str(val2)+"%", x=0.5, y=0.5, font_size=20, showarrow=False),
                               dict(text=str(val3)+"%", x=0.9, y=0.5, font_size=20, showarrow=False),
                              ])
fig.show()

【讨论】：

哇，太棒了。谢谢你。它也适用于破折号，我只需证明一点注释的合理性。
对不起，我还有另一个问题，如果我按此代码执行，我设置的子图标题将消失。请你帮帮我。
试试这个：fig = make_subplots(...,subplot_titles=['SALES KPI','CARD KPI','LOAN KPI'])
是的，我已经添加了它，但它仍然没有出现。
我指定的方式不同。当我用我的代码尝试它时，标题没有出现，但是用你的代码，它正确显示了。看来我的注释代码会影响所有注释。 fig = make_subplots(...,subplot_titles=('SALES KPI','CARD KPI','LOAN KPI'),...)

【解决方案2】：

我尝试了一些代码，并找到了一个向 fig 添加注释的解决方案并且它有效。请参考以下代码：

from plotly.subplots import make_subplots
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([   
        dbc.Row([
        html.Img(src='/assets/logo Wr-02.png',style={'height':'12%',
                                                 'width':'12%',
                                                 'position' : 'relative',
                                                 'padding-top' : 10,
                                                 'padding-left' : 10})
        ],style={'textAlign': 'left','padding-left' : 25}),
               
        # Row 4
        dbc.Row(dbc.Col(html.H2('KPI Subplots',className='text-center text primary, mb-3'))),
        dbc.Row([
            dbc.Col([html.H5('Sales KPI',className='text-center'),
                dcc.Graph(id='credit_fluctuation',figure={}),
                ],width={'size':6,"offset":0,'order':1}),               
            dbc.Col([html.H5('Drop Down',className='text-center'),
                dcc.Dropdown(id='br_cd_2',placeholder="Please select branch code",
                                options=[{'label':x,'value':x} for x in df3.sort_values('Branch')['Branch'].unique()],
                                value='Select',
                                multi=False,
                                disabled=False,
                                clearable=True,
                                searchable=True),
                    ],width={'size':2,"offset":0,'order':1})
        ]),

])

@app.callback(
        Output(component_id='credit_fluctuation',component_property='figure'),
        [Input(component_id='br_cd_2',component_property='value')])

def build_graph(branch_cd):
    global dff
    if not branch_cd or 'Select' in branch_cd:
        dff = df3[(df3['Name']=="Sales")]
        dff = pd.pivot_table(dff,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
        dff['Percent'] = ((dff['Complete']/dff['KPI'])*100).round(decimals=2)
        val=dff.iloc[0,3]

        dff2 = df3[(df3['Name']=="Card")]
        dff2 = pd.pivot_table(dff2,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
        dff2['Percent'] = ((dff2['Complete']/dff2['KPI'])*100).round(decimals=2)
        val2=dff2.iloc[0,3]

        dff3 = df3[(df3['Name']=="Loan")]
        dff3 = pd.pivot_table(dff3,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
        dff3['Percent'] = ((dff3['Complete']/dff3['KPI'])*100).round(decimals=2)
        val3=dff3.iloc[0,3]
    
    else:
        dff = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
        dff = dff[(dff['Name']=='Sales')]
        val=dff.iloc[0,4]
        
        dff2 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
        dff2 = dff2[(dff2['Name']=='Card')]
        val2=dff2.iloc[0,4]    

        dff3 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
        dff3 = dff3[(dff3['Name']=='Loan')]
        val3=dff3.iloc[0,4]        
        val4=dff3.iloc[0,3]
        val5=dff3.iloc[0,2]-dff3.iloc[0,2]
        
    fig = make_subplots(rows=1, cols=3,specs=[[{"type": "pie"}, {"type": "pie"}, {"type": "pie"}]],
                       subplot_titles=("Sales KPI", "Card KPI", "Loan KPI"))
    
    fig.add_trace(go.Pie(labels=['',''],
                          values=[val,100-val],
                          hole=0.8,
                          textinfo='none',
                          marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                          ),row=1, col=1),
    
    fig.add_trace(go.Pie(labels=['',''],
                          values=[val2,100-val2],
                          hole=0.8,
                          textinfo='none',
                          marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                          ),row=1, col=2),
        
    fig.add_trace(go.Pie(labels=['',''],
                          values=[val3,100-val3],
                          hole=0.8,
                          textinfo='none',
                          marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
                          ),row=1, col=3),     
        
    fig.add_annotation(x=0.06, y=0.5,
            text=str(val)+"%",
            showarrow=False,
            font_size=20)
    fig.add_annotation(x=0.5, y=0.5,
            text=str(val2)+"%",
            showarrow=False,
            font_size=20)
    fig.add_annotation(x=0.94, y=0.5,
            text=str(val3)+"%",
            showarrow=False,
            font_size=20)    
    fig.update_traces(showlegend=False)
    return fig

if __name__ == "__main__":
    app.run_server(debug=False,port=8057)

【讨论】：