Chartjs Polar Area Chart设置startAngle后pointLabels未同步旋转错位问题

问题原因 #

Chart.js 2.x版本极地区域图的外围点标签（pointLabels）渲染逻辑未同步适配自定义的startAngle偏移，仅按默认0弧度起始位置计算标签角度，因此出现标签和对应区块错位的情况，区块本身与tooltip逻辑正常。

解决方案 #

无需引入datalabels等第三方插件，通过Chart.js原生自定义插件机制修正pointLabels的角度计算即可，同时原生pointLabels支持标签换行、响应式适配，可满足需求。

修正后完整代码 #

const mydata = {
  labels: [
    'Question1',
    'Question2',
    'Question3',
    'Question4',
    'Question5',
    'Question6'
    // 长标签换行写法示例：['第一行文本', '第二行文本']
  ],
  datasets: [{
    label: 'Data labels don\'t move',
    data: [5, 8, 6, 6, 7, 8],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(75, 192, 192)',
      'rgb(255, 205, 86)',
      'rgb(201, 203, 207)',
      'rgb(255, 99, 132)',
      'rgb(201, 203, 207)'
    ]
  }]
};

// 注册自定义修正插件
Chart.plugins.register({
  beforeInit: function(chart) {
    if (chart.config.type === 'polarArea' && chart.config.options.startAngle) {
      const startAngle = chart.config.options.startAngle;
      const originalPointLabelCallback = Chart.scaleService.getScaleDefaults('radialLinear').pointLabels.callback;
      Chart.scaleService.getScaleDefaults('radialLinear').pointLabels.callback = function(label, index) {
        const totalLabels = chart.data.labels.length;
        const anglePerLabel = 2 * Math.PI / totalLabels;
        // 给标签角度添加startAngle偏移量实现对齐
        this.angle = index * anglePerLabel + startAngle;
        return originalPointLabelCallback ? originalPointLabelCallback(label, index) : label;
      }
    }
  }
});

var myChart = new Chart('mychartId', {
  type: "polarArea",
  data: mydata,
  options: {
    responsive: true,
    cutoutPercentage: 20,
    startAngle: -1 * Math.PI,
    legend: {
      display: false
    },
    layout: {
      padding: 20
    },
    scale: {
      ticks: {
        max: 10,
        beginAtZero: true,
        min: 1,
        stepSize: 1,
        display: false
      },
      angleLines: {
        display: false
      },
      pointLabels: {
        display: true
        // 可配置参数适配换行：fontSize: 12, lineHeight: 1.4
      }
    }
  }
});

补充说明 #

• 原生pointLabels支持换行，只需将labels数组的对应项改为字符串数组，每一项对应一行即可，不会出现截断问题
• 所有原有配置逻辑保留，无额外依赖，兼容原有响应式适配规则

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