如何根据数据在 plotly-dash 中制作交互式指标答案

【问题标题】：How make interactive indicators in plotly-dash depending on data如何根据数据在 plotly-dash 中制作交互式指标
【发布时间】：2021-04-22 22:58:19
【问题描述】：

我正在尝试用 plotly 编写一个交互式仪表板，但这是我第一次使用 python，所以我想我可能误解了一些东西。我有一个名为tabela_simples.csv 的csv 文件，其中包含随机数据，但我现在使用的三列是Data，例如，格式为日/月/年（22/04/2021）的日期， Primeira_dose 和 Segunda_dose 是一个整数。

现在的目标是创建一些指标来相应地更改日期过滤器或DatePickerRange，完成后，我打算创建其他图形。我的代码很长，可能很混乱或可优化，但我付出了很多努力。

import dash 
import dash_core_components as dcc  
import dash_html_components as html  
import pandas as pd 
import plotly.graph_objects as go 
from dash.dependencies import Input, Output
from datetime import date 
df = pd.read_csv('tabela_simples.csv')
df['Data'] = pd.to_datetime(df['Data'],format='%d/%m/%Y')
df = df.set_index('Data')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
    ## cards   
    html.Div([
        dcc.DatePickerRange(
            id='date-picker-range',
            display_format='DD-MM-YYYY'
            ),
        dcc.Graph(id='card_fig')
    ]),
    ]) 
@app.callback(
    [Output(component_id='card_fig',component_property='figure')] 
    [Input(component_id='date-picker-range', component_property='start_date'),
    Input(component_id='date-picker-range', component_property='end_date')]
)
def update_figure(start_date,end_date):    
    my_df = df[df['Data'] <= end_date & df[df['Data'] >= start_date]
    card = go.Figure()
    card.add_trace(go.Indicator(
        mode = "number+delta",
        value = my_df['Primeira_dose'].sum(),
        title= "Primeira dose",
        number = { 'font': { 'size': 50 }},
        domain = {'row': 0, 'column': 1}))
    card.add_trace(go.Indicator(
        mode = "number+delta",
        value = my_df['Segunda_dose'].sum(),
        title= "Primeira dose",
        number = { 'font': { 'size': 50 }},
        domain = {'row': 0, 'column': 2}))            
    card.update_layout(
        grid = {'rows': 1, 'columns': 2, 'pattern': "independent"},
        template = {'data' : {'indicator': [{
        'mode' : "number+delta",
        }]}})
    return{card}
if __name__ == '__main__':
    app.run_server(debug=True)

当我尝试运行应用程序时，终端返回两个主要错误：

Traceback (most recent call last):
  File "app_dinamico.py", line 41, in <module>
    [Output(component_id='card_fig',component_property='figure')]
TypeError: list indices must be integers or slices, not Input

或者最近的，我不知道为什么会发生

File "app_dinamico.py", line 44
    card = go.Figure()
    ^ 
SyntaxError: invalid syntax

也许只是一个愚蠢的错误，但我在stackoverflow中看了这么多教程和问题，我越来越困惑，所以如果有人向我解释我做错了什么，我会很感激

【问题讨论】：

标签： python callback plotly plotly-dash dashboard

【解决方案1】：

我认为在应用回调中您不需要方括号，这就是出现第一条错误消息的原因。因此，如果您将应用回调替换为以下内容，则应解决第一个问题：

@app.callback(
    Output(component_id='card_fig',component_property='figure'),
    Input(component_id='date-picker-range', component_property='start_date'),
    Input(component_id='date-picker-range', component_property='end_date')
)

至于第二个问题，你只需要修改上一行（43）如下：

my_df = df[df['Data'] <= end_date & df['Data'] >= start_date]

这应该可以解决语法问题。

【讨论】：