如何避免Chart.js极区图因长标签缩放/居中白色圆形元素

一、修复长标签导致的图表缩放问题 #

长标签会挤压图表布局，可通过以下配置调整：

1. 限制标签宽度并自动换行 #

在图表配置的scales.r.pointLabels中添加maxWidth和padding，强制长标签换行并预留空间：

scales: {
  r: {
    // ...其他原有配置
    pointLabels: {
      display: true,
      callback: function (label) {
        // 可选：手动截断或换行，比如超过8字符换行
        // if (label.length > 8) {
        //   return label.slice(0, 8) + '\n' + label.slice(8);
        // }
        return label;
      },
      centerPointLabels: true,
      font: { size: 13 },
      maxWidth: 100, // 限制标签最大宽度，超出自动换行
      padding: 10, // 标签与图表间的内边距
    },
  },
},

2. 调整图表整体布局 padding #

在配置中添加layout项，给图表整体预留空间，避免标签溢出或挤压：

layout: {
  padding: {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20,
  },
},

3. 固定图表容器尺寸 #

通过CSS给图表父容器设置固定或最大尺寸，配合maintainAspectRatio: false稳定布局：

.chart-wrapper {
  width: 500px;
  height: 500px;
  position: relative; /* 为中间div定位做准备 */
}

二、确保中间白色div始终居中 #

不管图表尺寸如何变化，用CSS绝对定位+transform实现精准居中：

1. CSS样式 #

.center-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 基于自身尺寸居中 */
  background: #fff;
  padding: 24px;
  z-index: 10; /* 确保在图表上方显示 */
}

2. React组件结构 #

<div className="chart-wrapper">
  <PolarArea data={perceptionDataGesundheit} options={chartOptions} />
  <div className="center-overlay">中间内容</div>
</div>

最终效果 #

• 长标签会自动换行，不再导致图表异常缩放
• 中间div始终固定在图表中心位置，不受布局变化影响

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