Python Plotly Dash：响应式/自动调整指示器文本

Question

如何在更改浏览器 window 大小时自动调整指示器中的文本和数字。

例如：

import plotly.graph_objects as go 
import dash_bootstrap_components as dbc
import dash
import dash_core_components as dcc
import dash_html_components as html

indicator_style ={"height": 100, 'border-radius': '13px',
                                                       'background': '#FFFFFF 0% 0% no-repeat padding-box',
                                                       'border': '1px solid  #CECECE',
                                                       'box-shadow': '3px 3px 6px #00000029', 'padding': '6px',
                                                       }

fig_1 = go.Figure(go.Indicator(mode="number",
                                         title='<b>'+'Indicator 1'+'<b>',
                                         value=477526,
                                         number={'valueformat': '$,.0f'},
                                         domain={'x': [0, 1], 'y': [0, 1]}))
fig_1.update_traces(number_font_size=33, title_font_size=16, title_font_family='Roboto',
                                          title_font_color="#211C51")

fig_2 = go.Figure(go.Indicator(mode="number",
                                                     title='<b>'+'Indicator 2'+'<b>',
                                                     value=477526,
                                                     number={'valueformat': '$,.0f'},
                                                     domain={'x': [0, 1], 'y': [0, 1]}))
fig_2.update_traces(number_font_size=33, title_font_size=16, title_font_family='Roboto',
                                                title_font_color="#211C51")


fig_3 = go.Figure(go.Indicator(mode="number",
                                                     title='<b>'+'Indicator 3'+'<b>',
                                                     value=477526,
                                                     number={'valueformat': '$,.0f'},
                                                     domain={'x': [0, 1], 'y': [0, 1]}))
fig_3.update_traces(number_font_size=33, title_font_size=16, title_font_family='Roboto',
                                              title_font_color="#211C51")

fig_4 = go.Figure(go.Indicator(mode="number",
                                                     title='<b>'+'Indicator 4'+'<b>',
                                                     value=477526,
                                                     number={'valueformat': '$,.0f'},
                                                     domain={'x': [0, 1], 'y': [0, 1]}))
fig_4.update_traces(number_font_size=33, title_font_size=16, title_font_family='Roboto',
                                          title_font_color="#211C51")

fig_5 = go.Figure(go.Indicator(mode="number",
                                                       title='<b>'+'Indicator 5'+'<b>',
                                                       value=477526,
                                                       number={'valueformat': '$,.0f'},
                                                       domain={'x': [0, 1], 'y': [0, 1]}))
fig_5.update_traces(number_font_size=33, title_font_size=16, title_font_family='Roboto',
                                            title_font_color="#211C51")
fig_6 = go.Figure(go.Indicator(mode="number",
                                                      title='<b>'+'Indicator 6'+'<b>',
                                                      value=0.25,
                                                      number={'valueformat': '.2%'},
                                                      domain={'x': [0, 1], 'y': [0, 1]}))
fig_6.update_traces(number_font_size=33, title_font_size=16, title_font_family='Roboto',
                                           title_font_color="#211C51")

app = dash.Dash(external_stylesheets=[dbc.themes.SANDSTONE])
app.layout = html.Div([
    dbc.Row([
        dbc.Col([dcc.Graph(figure=fig_1, style=indicator_style)],width=2),
        dbc.Col([dcc.Graph(figure=fig_2, style=indicator_style)],width=2),
        dbc.Col([dcc.Graph(figure=fig_3, style=indicator_style)],width=2),
        dbc.Col([dcc.Graph(figure=fig_4, style=indicator_style)],width=2),
        dbc.Col([dcc.Graph(figure=fig_5, style=indicator_style)],width=2),
        dbc.Col([dcc.Graph(figure=fig_6, style=indicator_style)],width=2)
    ])

])

app.run_server(debug=True, use_reloader=False)  # Turn off reloader if inside Jupyter

正常和小型浏览器大小：

指标window变小了，但是文字和数字没变，什么都看不到

如何根据浏览器大小缩小数字和文本？有没有办法检测浏览器的大小 window 并将其作为文本大小设置中的条件？

Answer 1

我不知道我是否理解正确你面临的问题是什么，但无论如何我认为你没有以最好的方式做到这一点。

要使应用响应，您需要在创建 dash 应用实例时添加此元数据：

app = dash.Dash(
    external_stylesheets=[dbc.themes.SANDSTONE],
    meta_tags=[
        {
            "name": "viewport",
            "content": "width=device-width, initial-scale=1, maximum-scale=1",
        }
    ],
)

与其使用 Plotly 图形，不如尝试使用 html.Div() 和回调来实现这一点...这样您就可以动态地提供您的应用程序；

我将使用您的第一个指标给您一个简单的例子：

app.layout = html.Div(
[
    dbc.Row(
        [
            dbc.Col(
                html.Div(
                    [
                        html.Div(f"Indicator {n}", style={"textAlign": "center"}),
                        html.Div(
                            id=f"value-{n}",
                            children=f"R$ {477526:,}",
                            style={"textAlign": "center", "fontSize": "28px"},
                        ),
                    ],
                    style=indicator_style,
                )
            )
            for n in range(6)
        ],
    ),
]

)

通过使用 html.Div 中的 ID，您将能够使用回调将所需的数据发送到您的 div 并根据需要显示

Python Plotly Dash：响应式/自动调整指示器文本

Python Plotly Dash : responsive/ autosize indicator text

python

plotly

plotly-dash

dash-bootstrap-components