Dash - Dynamic Layoutは、ウィンドウがサイズ変更されるまでサイズ変更グラフの寸法を伝播しません
以下のサンプルダッシュアプリケーションでは、可変数の行と列を持つ動的レイアウトを作成しようとしています。このダイナミックグリッドスタイルのレイアウトには、ドロップダウンなどで変更できるさまざまなグラフが入力されます。
主な問題は、これまでに稼働しています。これは、ビューポートユニットに関連し、動的レイアウトに対応するために適切に個々のグラフをスタイル化しようとしました。たとえば、ビューポートユニットを介してdcc.Graph()コンポーネントのスタイルを変更しています。ここで、ディメンション（例：heightおよびwidth _ _ _ var] _ _35vw_ _23vw_列数によって異なります）。たとえば、3から2の列数を変更すると、dcc.Graph()コンポーネントのheightwidthが明確に変更されますが、この変更は反映されません。ウィンドウが物理的にサイズ変更されるまで実際にレンダリングされたレイアウト（サンプルコードの下の画像を参照）。
ウィンドウのサイズを変更しなくても、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()
_関連するスクリーンショット（Image 1 - ページの読み込み、画像2 - 列を2に変更する）：
続行する方法は次のとおりです。
app.pyはインポートされている必要があります。
from dash.dependencies import Input, Output, State, ClientsideFunction
_ダッシュレイアウトのどこかに下記のDIVを含めましょう。
html.Div(id="output-clientside"),
_assetフォルダには、独自のスクリプト、またはデフォルトのスクリプトの再推定_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 Updateになる可能性があります。
そのため、次の変更を加えます。ステップ1：変更されていない
ステップ2：変更されていないステップ3：JavaScriptファイル内に「Resize2」機能を追加しましょう。
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"は次のコールバックで定義されている各入力に1つの引数を取ります。これは、このすべてのコールバックで指定された出力内の "value2"の値を返します。あなたはそれを「null」に設定することができます、それは説明するためだけです。
ステップ4：私たちのコールバックが次のようになります。
app.clientside_callback(
ClientsideFunction(namespace="clientside", function_name="resize2"),
Output("output-clientside", "children"),
[Input("yourGraph_ID", "figure"), Input("yourDivContainingYourGraph_ID", "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関数を実行することも可能でなければならないと仮定しますが、まだチェックしませんでした。
それがいくらか助けることを願っています
この動作は私へのプロットバグのように見えます。
これが可能な回避策/短期間の解決策です。
コールバックを使用できるような素晴らしいライブラリvisdccがあります JavaScript 。あなたはそれを経由でインストールすることができます
_pip install visdcc_
divに追加します。
visdcc.Run_js(id='javascript'),
そしてコールバックを追加します
_@app.callback(
Output('javascript', 'run'),
[Input('rows', 'value'),
Input('columns', 'value')])
def resize(_, __):
return "console.log('resize'); window.dispatchEvent(new Event('resize'));"
_resizeイベントの後にコンソールにエラーをスローします（ウィンドウが手動でサイズ変更されたときにも発生します）が正しく表示されます。
フルコード
_import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import visdcc
SIZING = {1: '40vw', 2: '35vw', 3: '23vw'}
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([
visdcc.Run_js(id='javascript'),
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'}
layout = [html.Div(className='row', children=[
html.Div(className=mapping[cols], style={'width': SIZING[cols], 'height': SIZING[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
@app.callback(
Output('javascript', 'run'),
[Input('rows', 'value'),
Input('columns', 'value')])
def resize(_, __):
return "console.log('resize'); window.dispatchEvent(new Event('resize'));"
#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):
style = {
'width': SIZING[cols],
'height': SIZING[cols],
}
fig = {'data': [], 'layout': {}}
return [fig, style]
if __name__ == '__main__':
app.server.run()
_