在下面的示例Dash应用程序中,我试图创建具有可变数量的行和列的动态布局。这种动态的网格样式布局将填充各种可通过下拉菜单等进行修改的图形。

到目前为止,我遇到的主要问题与视口(viewport)单位有关,并试图适本地设置各个图形的样式以适应动态布局。例如,我正在通过视口(viewport)单位修改dcc.Graph()组件的样式,其中的维数(例如heightwidth取决于列数可以是35vw23vw)。例如,当我将列数从3更改为2时,height组件的widthdcc.Graph()会明显更改,但是此更改不会在实际渲染的布局中反射(reflect)出来,直到对窗口进行物理调整为止(请参见示例代码)。

如何强制dcc.Graph()组件传播这些更改而无需调整窗口大小?

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True

app.layout = html.Div([

    html.Div(className='row', children=[

        html.Div(className='two columns', style={'margin-top': '2%'}, children=[

            html.Div(className='row', style={'margin-top': 30}, children=[

                html.Div(className='six columns', children=[

                    html.H6('Rows'),

                    dcc.Dropdown(
                        id='rows',
                        options=[{
                            'label': i,
                            'value': i
                        } for i in [1,2,3,4]],
                        placeholder='Select number of rows...',
                        clearable=False,
                        value=2
                    ),

                ]),

                html.Div(className='six columns', children=[

                    html.H6('Columns'),

                    dcc.Dropdown(
                        id='columns',
                        options=[{
                            'label': i,
                            'value': i
                        } for i in [1,2,3]],
                        placeholder='Select number of columns...',
                        clearable=False,
                        value=3
                    ),

                ])

            ]),

        ]),

        html.Div(className='ten columns', id='layout-div', style={'border-style': 'solid', 'border-color': 'gray'}, children=[])

    ])

])

@app.callback(
    Output('layout-div', 'children'),
    [Input('rows', 'value'),
    Input('columns', 'value')])
def configure_layout(rows, cols):

    mapping = {1: 'twelve columns', 2: 'six columns', 3: 'four columns', 4: 'three columns'}
    sizing = {1: '40vw', 2: '35vw', 3: '23vw'}

    layout = [html.Div(className='row', children=[

        html.Div(className=mapping[cols], children=[

            dcc.Graph(
                id='test{}'.format(i+1+j*cols),
                config={'displayModeBar': False},
                style={'width': sizing[cols], 'height': sizing[cols]}
            ),

        ]) for i in range(cols)

    ]) for j in range(rows)]

    return layout

#Max layout is 3 X 4
for k in range(1,13):

    @app.callback(
        [Output('test{}'.format(k), 'figure'),
        Output('test{}'.format(k), 'style')],
        [Input('columns', 'value')])
    def create_graph(cols):

        sizing = {1: '40vw', 2: '35vw', 3: '23vw'}

        style = {
            'width': sizing[cols],
            'height': sizing[cols],
        }

        fig = {'data': [], 'layout': {}}

        return [fig, style]

if __name__ == '__main__':
    app.server.run()

相关屏幕截图(图像1-页面加载,图像2-将列更改为2):

python - 破折号-动态布局在调整窗口大小之前不会传播调整大小的图形尺寸-LMLPHP

python - 破折号-动态布局在调整窗口大小之前不会传播调整大小的图形尺寸-LMLPHP

最佳答案

这是如何进行:

app.py必须导入:

from dash.dependencies import Input, Output, State, ClientsideFunction

让我们将以下Div包含在Dash布局中的某个位置:
html.Div(id="output-clientside"),

Assets 文件夹必须包含您自己的脚本或默认脚本resizing_script.js,其中包含:
if (!window.dash_clientside) {
    window.dash_clientside = {};
}
window.dash_clientside.clientside = {
    resize: function(value) {
        console.log("resizing..."); // for testing
        setTimeout(function() {
            window.dispatchEvent(new Event("resize"));
            console.log("fired resize");
        }, 500);
    return null;
    },
};

在您的回调中,放置此一个,不带@:
app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="resize"),
    Output("output-clientside", "children"),
    [Input("yourGraph_ID", "figure")],
)

此时,当您手动调整窗口大小时,将在浏览器中触发调整大小功能。

我们的目标是达到相同的结果,但不手动调整窗口大小。例如,触发器可以是className更新。

因此,我们应用了以下更改:
步骤1:不变

步骤2:不变
步骤3:让我们在JavaScript文件中添加一个“resize2”函数,该函数带有2个参数:
if (!window.dash_clientside) {
  window.dash_clientside = {};
}
window.dash_clientside.clientside = {
  resize: function(value) {
    console.log("resizing..."); // for testing
    setTimeout(function() {
      window.dispatchEvent(new Event("resize"));
      console.log("fired resize");
    }, 500);
    return null;
  },

  resize2: function(value1, value2) {
    console.log("resizingV2..."); // for testing
    setTimeout(function() {
       window.dispatchEvent(new Event("resize"));
       console.log("fired resizeV2");
    }, 500);
    return value2; // for testing
  }
};

函数“resize2”现在需要2个参数,下面的回调中定义的每个Input都需要一个参数。它将在此完全相同的回调中指定的输出中返回“value2”的值。您可以将其设置回“null”,这只是为了说明。

步骤4:我们的回调现在变为:
app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="resize2"),
    Output("output-clientside", "children"),
    [Input("yourGraph_ID", "figure"), Input("yourDivContainingYourGraph_ID", "className")],
)

最后,您需要一个按钮来触发事件,该事件将更改容器的className。

假设您有:
daq.ToggleSwitch(
    id='switchClassName',
    label={
        'label':['Option1', 'Option2'],
    },
    value=False,
),

和以下回调:
@app.callback(Output("yourDivContainingYourGraph_ID", "className"),
              [Input("switchClassName","value")]
              )
def updateClassName(value):
    if value==False:
        return "twelve columns"
    else:
        return "nine columns"

现在,如果您保存了所有内容,然后刷新,则每次在您按下toggleSwitch时,它都会调整容器的大小,触发函数并刷新图形。

考虑到完成的方式,我认为也有可能以相同的方式运行更多的Javascript函数,但我尚未检查。

希望对您有所帮助

关于python - 破折号-动态布局在调整窗口大小之前不会传播调整大小的图形尺寸,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55462861/

10-12 18:22
查看更多