堆栈内存溢出
  繁体   English   中英

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

[英]Progress pie chart subplot with percentage

 原文  2021-12-22 09:44:40  7   2    python/ plotly

问题描述

我正在尝试制作带有完成百分比的甜甜圈图。 下面是我的代码：

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)

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

这是第一个破折号： 在此处输入图像描述

这是第二个破折号： 在此处输入图像描述

2 个解决方案

解决方案1
 3 已采纳  2021-12-22 13:53:47

我没有在dash环境中检查它，但我确实检查了它plotly。 子图中的注释设置列表中的相应值。 在官方参考中看到这个。

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()

在此处输入图像描述

解决方案2
 0  2021-12-22 16:01:22

我尝试了一些代码，并找到了一个向 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)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 plotly 从百分比值创建进度饼图？ 如何在plotly中子绘制饼图？ 改进子图中饼图上的标签 如何将 TreeMap 和饼图添加为子图？ 制作具有灰度可读百分比的饼图 Plotly - 带有百分比和一位小数的饼图 更改特定子图的背景颜色（饼图外部） 在girdspec中的多列范围子图中左右对齐饼图 散景饼图倒置显示百分比标签 为我的数据框创建带有百分比的单列的饼图
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM