ExtJS如何添加置顶居中、自适应画布大小的图表叠加标签

直接通过DOM叠加层+CSS定位实现即可，无需修改图表原生title配置，画布缩放、重绘时标签位置始终保持固定：

• 给图表外层容器设置相对定位，作为叠加标签的定位基准
• 自定义标签使用绝对定位，固定距顶部5px，通过水平偏移实现居中效果，设置高层级保证显示在画布上方
• 在图表渲染完成回调中插入标签节点，提前给每个图表配置对应标签文本即可，插入前先清除旧节点避免重复渲染

核心代码 #

样式定义 #

.chart-container {
  position: relative;
}
.chart-inner-tag {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  pointer-events: none; /* 不拦截图表的hover、点击等交互 */
}

图表配置逻辑（Sencha Charts环境） #

{
  xtype: 'cartesian',
  cls: 'chart-container',
  // 每个图表单独配置自己的标签文本
  chartTag: '对应图表的标签内容',
  listeners: {
    render: function(chart) {
      // 清除已存在的旧标签
      const oldTag = chart.getEl().down('.chart-inner-tag');
      if (oldTag) oldTag.remove();
      // 插入新的叠加标签
      chart.getEl().append({
        tag: 'div',
        cls: 'chart-inner-tag',
        html: chart.chartTag
      });
    }
  }
}

这种方案的标签是独立于canvas的普通DOM元素，不会随画布尺寸变化、重绘出现错位，你可以按需自定义标签的字体、背景、内边距等样式，比直接在canvas上绘制文本的维护成本低很多。

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