Je me suis cogné la tête contre le mur toute la journée et je n'arrive pas à trouver un moyen d'ajuster un indicateur de tableau de bord à l'intérieur d'une carte dash_bootstrap_components.

Il semble que le corps de la carte et le graphique ne vivent pas à l'intérieur de la carte. Je ne connais pas très bien le dash, il est donc difficile de trouver un moyen de résoudre le problème.

Voici ce que j'ai pu faire jusqu'à présent en termes de tracé de l'indicateur:

fig3 = go.Figure()
fig3.add_trace(go.Indicator(
    mode = "number+delta",
    number = {"font":{"size":40},'prefix': "$"},
    value = 2045672,
    delta = {'reference': 30000},
    gauge = {'shape': "bullet"},
    title = {"text": "On Hand<br><span style='font-size:0.9em;color:gray'></span>"},
    #title='Stock On Hand',
    domain = {'x': [0, 1], 'y': [0, 1]},
    ))
fig3.update_layout(paper_bgcolor = "rgba(0,0,0,0)",
                   plot_bgcolor = "rgba(0,0,0,0)",
                   autosize=False,
                   width = 200,
                   height=200,
                  )
fig3.update_traces(align="center", selector=dict(type='indicator'))

Je suis obligé de spécifier la largeur et la hauteur de l'indicateur, sinon il est beaucoup trop grand, mais cela pose des problèmes car sa taille ne s'ajuste pas par rapport à la carte.

Voici le code de tiret html pour la boîte et le tracé:

html.Div(children=[

             html.Div(children=[
                html.Div(children=[ 
                    html.Div(children=[
                      dbc.Card(
                        [dbc.CardBody(
                            [dcc.Graph(figure=fig3)
                             ]
                        )],className="card", style={"width": "15rem", "height":"8rem"}
   
                    ),
                ], className='jumbotron', style={'background-color': '#fffffff'}),
                    
                ])
            ],className="col-3 mx-auto"),

           ],className="row p-0 h-100", style={'background-color': '#f7f7f7', 'height':110}),
    ], className="full-width p-0 h-100", style={'background-color': '#fffffff'}),
            

Et voici à quoi ressemble la sortie finale:

enter image description here

Je ne sais pas quoi d'autre je peux essayer d'apporter le graphique à l'intérieur de la boîte, toute aide serait appréciée

0
Peyo 3 févr. 2021 à 15:43

1 réponse

Meilleure réponse

Supprimez les instances où vous définissez le height dans le style des composants du tableau de bord et l'indicateur n'est pas coupé.

Vous pouvez donc faire quelque chose comme ceci:

app.layout = html.Div(
    children=[
        html.Div(
            children=[
                html.Div(
                    children=[
                        html.Div(
                            children=[
                                dbc.Card(
                                    [
                                        dbc.CardBody(
                                            [dcc.Graph(figure=fig3)],
                                            style={"width": "15rem"},
                                        )
                                    ]
                                )
                            ],
                            className="jumbotron",
                            style={"backgroundColor": "#fffffff"},
                        )
                    ],
                    className="col-3 mx-auto",
                )
            ],
            className="row p-0 h-100",
            style={"backgroundColor": "#f7f7f7"},
        )
    ],
    className="full-width p-0 h-100",
    style={"backgroundColor": "#fffffff"},
)

J'ai également changé la casse des propriétés de style en camelCase car c'est ce que React (utilisé par le tiret) aime.

1
Bas van der Linden 6 févr. 2021 à 16:37