javascript - 如何使用 ng2-charts 和 chart.js 在极坐标图的环之外的固定位置绘制外部标签？

我正在使用 Angular 中的 chart.js ^2.8.0 和 ng2-charts ^2.3.0 绘制极坐标图。我使用了 chartjs-plugin-datalabels 来显示标签，但它不支持像这个 chart.js 插件那样将标签固定显示在极坐标图环外的位置，用于在饼图外显示标签。

代码：

myColors = [{ backgroundColor: ["rgb(203, 75, 75, 0.5)", "rgb(237, 194, 64, 0.5)", "rgb(175, 216, 248, 0.5)"] }];

ChartPlugins = [pluginDataLabels];

polarAreaChartOptions: ChartOptions = {
    
    plugins: {
      datalabels: {
         color: '#000000',
         anchor: 'end',
         align: 'end',
         padding: 50,
         display: true,
         font: {
           weight: 'bolder'
         },
         formatter: function(value, ctx) {
          return `${ctx.chart.data.labels[ctx.dataIndex]} - ${value} %`;
       },
      },
    },
    scale: {
      ticks: {
          beginAtZero: true,
          max: 100,
          min: 0,
          stepSize: 10
      },
      gridLines: {
        color: ['gray', 'gray', 'gray', 'gray', 'red','gray', 'gray', 'gray', 'gray', 'gray'],
        lineWidth: [1, 1, 1, 1, 3, 1, 1, 1, 1, 1]
      }
    }
  };
        
polarAreaChartType: ChartType = "polarArea"; 

标记

<canvas id="polar-chart" baseChart height="40vh" width="120vw" 
                        [data]="polarAreaChartData" 
                        [labels]="polarAreaChartLabels"
                        [legend]="polarAreaLegend"
                        [plugins]="ChartPlugins"
                        [options]="polarAreaChartOptions"
                        [chartType]="polarAreaChartType" 
                        [colors]="myColors">        
                    </canvas>

有没有任何插件或附加组件可以在 polar chart.js 和 ng2-charts 中将标签显示在环外？

答案＃1

如果你更新到 chart.js V3，你可以使用内置的 pointLabels 并将它们居中：

const options = {
  type: 'polarArea',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      r: {
        pointLabels: {
          display: true,
          centerPointLabels: true
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>