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

Question

我正在用 chart.js ^2.8.0 和 ng2-charts ^2.3.0 在 Angular 中绘制极坐标图。我已经使用 chartjs-plugin-datalabels 来显示标签，但这不支持在极坐标图环外固定位置的外部标签，例如 plugin for 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 中显示环外的标签？

Answer 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>

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

How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?

javascript

angular

typescript

chart.js

ng2-charts