如何使用Dash和Plotly在网格单元格的图表上方居中显示文本

问题描述 #

使用Dash和Plotly构建网格表格时，无法实现文本在单元格内的图表上方居中：图表未在单元格内居中，文本仅全局视图居中，未相对于单元格和图表精准对齐。

解决步骤 #

1. 调整Dash布局结构 #

给包含图表和文本的外层容器添加container类（提供相对定位上下文），确保文本层的绝对定位基于单元格内的图表容器，而非整个页面。

修改后的app.py关键代码片段：

# 原grid-item内的内容调整为：
html.Div(
    [
        html.Div(
            [
                html.Div(
                    [
                        dcc.Graph(
                            id="pie-chart-table",
                            config={"displayModeBar": False},
                            figure=fig_pie,
                            style={
                                "width":"30vmin",
                                "height":"30vmin",
                            },
                        ),
                    ], className = "svg-container",
                ),
                html.Div(
                    [
                        html.Div(
                            [
                                "centered over graph",
                            ], className = "centered-text",
                        ),
                    ], className = "overlay",
                )
            ], className = "container",  # 新增容器类，提供相对定位上下文
        ),
    ]
    , className = "grid-item",
),

2. 更新CSS样式 #

修正容器定位和居中逻辑，确保图表在单元格内居中，文本精准覆盖图表上方：

修改后的playground-styles.css完整代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100%;
}

.grid-item {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.container {
  position: relative;
  width: fit-content; /* 容器宽度适配图表，避免过度拉伸 */
  margin: 0 auto; /* 让图表容器在单元格内水平居中 */
}

.svg-container {
  width: 30vmin;
  height: 30vmin;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none; /* 可选：禁用文本层鼠标事件，避免遮挡图表交互 */
}

.centered-text {
  /* 可自定义文本样式 */
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

关键原理 #

• container类的position: relative为overlay的绝对定位提供了参考坐标系，确保文本层仅覆盖当前图表区域。
• margin: 0 auto让图表容器在单元格内水平居中，解决图表偏移问题。
• pointer-events: none确保图表的交互功能不受文本层遮挡（按需添加）。

内容的提问来源于stack exchange，提问作者blackno666