Plotly Dash：渲染饼图或类似图形

Question

我想渲染一个圆环/饼状图，显示由回调计算和返回的分数。

到目前为止，这是我的尝试，我将饼图定义为：

# Asset Stabilization score graph
 html.Div([
                    dcc.Graph(id='score_pie'),
 ], style={'display': 'inline-block', 'width': '60%', 'margin-left': '50%'}),

回调：

@app.callback(Output("score-pie", "figure"),
              [
                 Input("lbutton", "n_clicks"),
              ]
             )
def render_score(n_clicks):

    trace=go.Pie(labels=['Score'], values=['60'], hole=.5)

    return {'data':[trace]}

考虑到我没有显示任何分布，这可能与饼图有关吗？

Answer 1

使用您的方法绝对有可能做到这一点，尽管可能有更好的解决方案。我已经为您创建了一个简单示例。

完整代码：

import plotly.express as px
import plotly.graph_objects as go
#from jupyter_dash import JupyterDash
from dash import Dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

# Build App
app = Dash(__name__)

app.layout =  html.Div([
    html.Div([
        dcc.Input(id='input', type='text', value='60')
    ]),
    html.Button('Submit', id='lbutton', n_clicks=0),
    html.Div([
        dcc.Graph(id='score_pie')
    ])
], style={'display': 'inline-block', 'width': '60%', 'margin-left': '50%'})
    

@app.callback(
    Output('score_pie', 'figure'),
    [Input('lbutton', 'n_clicks')],
    [State('input', 'value')],
)
def render_score(clicks, score):
        score = int(score)
        
        fig = go.Figure(
            data=[
                go.Pie(
                    labels=['', ''], 
                    values=[score, 100-score], 
                    hole=.5,
                    textinfo='none',
                    marker_colors=['rgb(113, 209, 145)', 'rgb(240, 240, 240)'],
                )
            ],
            layout=go.Layout(
                annotations=[{'text': str(score) + "%", 'x':0.50, 'y':0.5, 'font_size':35, 'showarrow':False}],
                showlegend=False
            )
        )

        return fig

app.run_server(port=8080)

Plotly Dash：渲染饼图或类似图形

Plotly Dash : Render a pie graph or similar figure

plotly

plotly-dash