绘图表如何垂直和水平对齐标题

Question

我已经看过文档，但没有成功。我正在寻找一种解决方案来对齐标题 - 垂直和水平。水平对齐不适用于第二行（“中心”一词不在中心）。两个表头不在同一水平线上，有办法对齐垂直位置吗？

import plotly.graph_objects as go

fig = go.Figure(data=[go.Table(
    header=dict(values=['this is not center', 'B Scores'],
                line_color='darkslategray',
                fill_color='lightskyblue',
                align='center'),
    cells=dict(values=[[100, 100, 100, 300], # 1st column
                       [90, 90, 90, 270]], # 2nd column
               line_color='darkslategray',
               fill_color='lightcyan',
               align='center'))
])
fig.update_layout(width=250, height=130)
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
fig.show()

感谢您的帮助

更新：如果我将文本设置为粗体，我可以修复标题的相同级别。为了让“center”这个词进入中心，我使用空格字符。

header=dict(values=['<b>this is not</b><br>   center', '<b>B Scores']

Answer 1

使用 Plotly Dash 表来代替

AFAIAA，Plotly

go.Table

内置样式格式化自定义功能相当有限。

但是，一个非常明显的替代解决方案是使用 Dash（由 Plotly 提供），更具体地说是 Dash DataTable 内置组件 (

dash.dash_table.DataTable

)。与 Plotly 表相比，它允许您可以想象的所有 HTML 和 CSS 自定义；直接在您的 Python 代码中。

例如以下：

import pandas as pd

import dash
from dash import dcc, html, callback, dash_table
from dash.dependencies import Input, Output, State

df = pd.DataFrame(
    {
        "this is now center": [100, 100, 100, 300],
        "B Scores": [90, 90, 90, 270],
    }
)

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
            style_table={"height": "250px", "overflowY": "auto"},
            style_header={
                "backgroundColor": "lightskyblue",
                "fontWeight": "bold",
                "textAlign": "center",
                "verticalAlign": "middle",
            },
            style_cell={
                "textAlign": "center",
                "overflow": "hidden",
                "textOverflow": "ellipsis",
                "maxWidth": 0,
            },
            style_cell_conditional=[
                {
                    "if": {"column_id": "this is now center"},
                    "width": "40%",
                    "whiteSpace": "normal",
                    "padding": "3px",
                },
                {
                    "if": {"column_id": "B Scores"},
                    "width": "40%",
                    "whiteSpace": "normal",
                    "padding": "3px",
                },
            ],
        ),
        html.Br(),
        dcc.Input(
            id="input-box",
            type="text",
            value="B Scores",
            style={"width": "500px"},
        ),
    ],
    style={"width": "200px", "margin": "20px"},
)

# Define callback to update table header
@callback(Output("table", "columns"), [Input("input-box", "value")])
def update_table_header(input_value):
    new_columns = [
        {"name": "this is now center", "id": "this is now center"},
        {"name": input_value, "id": "B Scores"},
    ]
    return new_columns


app.run(jupyter_mode="tab") # Remove the jupyter param if not running from notebook

产量：