html.div 如何布局dcc组件

如果你想在HTML中使用Dash组件，可以使用Dash的布局函数。其中，最常用的布局函数是`html.Div()`。你可以在`html.Div()`中嵌套其他Dash组件来构建你的页面布局，例如：

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div(
    children=[
        dcc.Graph(
            id='example-graph',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                    {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
                ],
                'layout': {
                    'title': 'Dash Data Visualization'
                }
            }
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

在这个例子中，我们嵌套了一个`dcc.Graph()`组件在一个`html.Div()`组件中，这个例子展示了如何在Dash应用程序中创建一个简单的条形图。