如何用ng2-charts创建等扇区Polar Area Chart？解决数据溢出问题

要实现所有扇区大小完全均等的极地区域图，核心思路是忽略原始数据的数值差异，强制所有数据点映射到同一个半径，再配合图表配置固定缩放范围，具体步骤如下：

• 统一数据值
  不管原始数据的大小，将所有数据点的数值替换为相同值（比如1），这样图表会自动生成等半径的扇区，同时保留原有的标签、颜色配置：

  // 原始业务数据
  originalData = [5, 10, 3, 7];
  originalLabels = ['A', 'B', 'C', 'D'];
  originalColors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
  
  // 处理后用于图表渲染的数据（所有值设为1）
  polarAreaData = {
    labels: this.originalLabels,
    datasets: [{
      data: this.originalData.map(() => 1), // 统一替换为固定值
      backgroundColor: this.originalColors
    }]
  };
  

• 固定缩放范围
  在图表配置中设置极轴的最大、最小值，确保半径范围被严格限制，同时可以隐藏无意义的刻度：

  polarAreaOptions: ChartOptions<'polarArea'> = {
    scales: {
      r: {
        max: 1,
        min: 0,
        ticks: {
          display: false // 隐藏刻度，因为数值已统一
        }
      }
    }
  };
  

• 自定义Tooltip显示真实数据
  由于我们替换了数据值，默认tooltip会显示1，需要自定义回调逻辑，让tooltip展示原始业务数据：

  polarAreaOptions: ChartOptions<'polarArea'> = {
    scales: { /* 上述缩放配置 */ },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            // 根据索引获取原始数据值
            const realValue = this.originalData[context.dataIndex];
            return `${context.label}: ${realValue}`;
          }.bind(this) // 绑定组件实例的this
        }
      }
    }
  };
  

• 模板引用
  在HTML中使用处理后的数据和配置：

  <canvas baseChart
          [data]="polarAreaData"
          [options]="polarAreaOptions"
          [type]="'polarArea'">
  </canvas>
  

你之前只设置scales.r.max=1但出现溢出，是因为Chart.js会根据原始数据的比例绘制，当数据值超过max时，会突破边界显示。而统一数据值后，所有点都在max范围内，就能完美实现均等扇区的效果。

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