破折号图标题定位答案

【问题标题】：Dash figure title positioning破折号图标题定位
【发布时间】：2022-09-29 10:07:31
【问题描述】：

我目前正在使用 Dash 设计仪表板。在我的页面中间，我有 3 个并排的 div，每个 div 都有一个 datepicker 回调并接收一个数字。三个 div 从同一个像素开始，并且具有完全相同的高度。这部分现在看起来像这样：

我现在有两个无法同时满足的设计要求：

客户要求三条红线（图字下方）中的每一条都与图的宽度相同。如图所示，如果它们是图中的一部分，我可以做到这一点（请注意，这些不是带下划线的标题，而是 px.line()）。我无法在 html 中轻松做到这一点，因为我事先不知道绘图的确切宽度（并且这会随着屏幕大小和 x 轴标签的字长而动态变化
三行应该完全在同一高度。这在 Html 中当然很容易，但我不能让它在 plotly/dash 中工作（当前是情节标题的标题也应该在相同的高度。这在 Html 中也很容易，不应该导致任何问题）

可能的解决方案：

将标题及其行更改为 Html。绘图渲染后，获取绘图宽度并将线宽更改为相同的值。似乎可行，但相当hacky
找到一个足够接近某些标准分辨率的解决方案。仍然会在其他人或缩放等时失败。
在 plotly 中找到解决方案。我基本上需要的是“在容器顶部下方画一条 y 像素线”。也许我在这里忽略了一些东西？
让客户相信这种（甚至不是伟大/特别的）设计不值得麻烦，只需做一些可行且看起来还不错的事情。可行，但我想知道它是否真的有必要。

所有三个数字的代码都很长，所以这里只是影响它们的标题和位置的部分：

fig = go.Figure(data=[go.Table(header=None,
        cells=dict(values=[[\'Ausschuss\', \'Gutmenge\', \'Ausschussquote\'], [ausschuss, gutmenge, str(quote).replace(\'.\',\',\')]],
        align=\'right\',
        font=dict(family=\'Arial\', size=14),
        height=28
        ))])
fig.for_each_trace(lambda t: t.update(header_fill_color=\'rgba(0,0,0,0)\')) #this gets rid of the title cells
fig.add_shape(type=\'line\',x0=0, y0=1, x1=1, y1=1, xref=\'paper\', yref=\'paper\', line=dict(color=\'rgb(225,18,58)\', width=1))
fig.update_layout(title=dict(text=\"<b>Figure 2</b>  \" + icon, font_family=\'Arial\', yanchor=\'top\', xanchor=\'left\', xref=\'paper\', x=0.01))
fig.update_layout(margin=dict(l=20, r=20, t=50, b=20))
return fig

所有三个数字都以相同的方式定位线

谢谢你的帮助

标签： python plotly-dash

【解决方案1】：

我认为将标题更改为html 是一个好方法。请参考以下代码：

import pandas as pd
import numpy as np
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_table
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            html.Span('Figure 1',className='text-left'),
            html.Hr(style={'color':'rgb(225,18,58)','height':2}),
            dcc.Graph(id='figure_1',figure={},style={'height':200})
        ],width={'size':4,"offset":0,'order':1}),
        dbc.Col([
            html.Span('Figure 2',className='text-left'),
            html.Hr(style={'color':'rgb(225,18,58)','height':2}),
            dcc.Graph(id='figure_2',figure={},style={'height':200})
        ],width={'size':4,"offset":0,'order':1}),
        dbc.Col([
            html.Span('Figure 3',className='text-left'),
            html.Hr(style={'color':'rgb(225,18,58)','height':2}),
            dcc.Graph(id='figure_3',figure={},style={'height':200})
        ],width={'size':4,"offset":0,'order':1}),         
    ], className='p-2 align-items-stretch'),
])

if __name__ == "__main__":
    app.run_server(debug=False,port=1117)

所以在这里我们将使用html.Hr 而不是在标题中添加形状。

这是输出（无法上传到stackoverflow，因此请使用此链接）： https://raw.githubusercontent.com/hoatranobita/Jobs/main/Screenshot%202022-09-29%20085023.png?token=GHSAT0AAAAAABYDKEWVJ4UYQUDNW26XXINEYZU7UGQ

【讨论】：