HTML 密谋破折号
HTML Plotly Dash
我找到了一个非常适合仪表板的 HTML 模板。一开始,我弄清楚了如何显示和更新图表。然后,在发布页面时,我 运行 陷入了在 Plotly Dash 中构建 HTML 的问题。
HTML结构
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">CARD_ONE</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body chartjs">
!!! dash chart !!! <canvas id="line-chart" height="500"></canvas>
</div>
</div>
</div>
</div>
</div>
无法理解 Plotly Dash 中的情节结构。
代码破折号。
def serve_layout():
return html.Div(
children=[
html.H4(children='OWERVIEW'),
html.Div(id='my-id', className='card', children='''ONE_CARD'''),
html.Div(className='card-header'),
html.H4(className="card-title", children='ONE_CARD??'),
html.Div(className='heading-elements-toggle'),
html.Div(className='heading-elements'),
html.Div(className="list-inline mb-0"),
dcc.Graph(id='example-graph', animate=True, responsive=True),
dcc.Interval(
id='interval-component',
interval=3 * 1000,
n_intervals=0,
),
],
)
代码中的所有组件都是逐行执行的,整个HTML结构看起来不是这样的。
问题:HTML 结构在 Dash Plotly 代码中应该是什么样的?
您需要为某些组件添加 ID,它们可以是任何内容。不过,对 data-action
部分不太确定。总的来说,它应该是这样的:
def serve_layout():
return html.Div(className='row', children=[
html.Div(className='col-12', children=[
html.Div(className='card', children=[
html.Div(className='card-header', children=[
html.Div(id='my-id', className='card', children='''ONE_CARD'''),
html.A(className='header-elements-toggle', children=html.I(className='la la-ellipsis-v font-medium-3'))
html.Div(className='heading-elements', children=[
html.Ul(className='list-inline mb-0', children=[
html.Li(html.A(html.I(className='ft-minus'))),
html.Li(html.A(html.I(className='ft-maximize'))),
]),
]),
]),
html.Div(className='card-content collapse show', children=[
html.Div(className='card-body chartjs', children=[
dcc.Graph(id='example-graph', animate=True, responsive=True),
dcc.Interval(
id='interval-component',
interval=3 * 1000,
n_intervals=0,
),
]),
]),
]),
]),
]),
我找到了一个非常适合仪表板的 HTML 模板。一开始,我弄清楚了如何显示和更新图表。然后,在发布页面时,我 运行 陷入了在 Plotly Dash 中构建 HTML 的问题。 HTML结构
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">CARD_ONE</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body chartjs">
!!! dash chart !!! <canvas id="line-chart" height="500"></canvas>
</div>
</div>
</div>
</div>
</div>
无法理解 Plotly Dash 中的情节结构。
代码破折号。
def serve_layout():
return html.Div(
children=[
html.H4(children='OWERVIEW'),
html.Div(id='my-id', className='card', children='''ONE_CARD'''),
html.Div(className='card-header'),
html.H4(className="card-title", children='ONE_CARD??'),
html.Div(className='heading-elements-toggle'),
html.Div(className='heading-elements'),
html.Div(className="list-inline mb-0"),
dcc.Graph(id='example-graph', animate=True, responsive=True),
dcc.Interval(
id='interval-component',
interval=3 * 1000,
n_intervals=0,
),
],
)
代码中的所有组件都是逐行执行的,整个HTML结构看起来不是这样的。
问题:HTML 结构在 Dash Plotly 代码中应该是什么样的?
您需要为某些组件添加 ID,它们可以是任何内容。不过,对 data-action
部分不太确定。总的来说,它应该是这样的:
def serve_layout():
return html.Div(className='row', children=[
html.Div(className='col-12', children=[
html.Div(className='card', children=[
html.Div(className='card-header', children=[
html.Div(id='my-id', className='card', children='''ONE_CARD'''),
html.A(className='header-elements-toggle', children=html.I(className='la la-ellipsis-v font-medium-3'))
html.Div(className='heading-elements', children=[
html.Ul(className='list-inline mb-0', children=[
html.Li(html.A(html.I(className='ft-minus'))),
html.Li(html.A(html.I(className='ft-maximize'))),
]),
]),
]),
html.Div(className='card-content collapse show', children=[
html.Div(className='card-body chartjs', children=[
dcc.Graph(id='example-graph', animate=True, responsive=True),
dcc.Interval(
id='interval-component',
interval=3 * 1000,
n_intervals=0,
),
]),
]),
]),
]),
]),