javascript - Hur man ritar yttre etiketter för polar-diagram med ng2-charts och chart.js på fasta positioner utanför ringarna?

Jag ritar ett polärt diagram med chart.js ^2.8.0 och ng2-charts ^2.3.0 i Angular. Jag har använt chartjs-plugin-datalabels för att visa etiketter, men detta stöder inte etiketter utanför vid fasta positioner utanför de polära diagramcirklarna som denna plugin för chart.js visar etiketter utanför cirkeldiagrammet.

KOD:

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"; 

Formatting

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

Finns det någon plugin eller tillägg för att visa etiketter utanför ringarna i polar chart.js och ng2-charts?

Svar #1

Om du uppdaterar till chart.js V3 kan du använda de inbyggda pointLabels och centrera dem:

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>