angular - 如何在chart.js Canvas ，Angular 12中垂直旋转圆环图切片中的标签文本？

Question

我试图在这个圆环图中的内圈方向垂直旋转标签文本。到目前为止，根本没有运气。谁能建议如何实现？
我正在使用 chartjs-plugin-labels 在切片中显示标签。

我想像这样实现文本方向

Answer 1

我还创建了一个与您的问题相关的视频，我看到您也在 youtube 上发送了一条消息。能够找到这篇 Stackoverflow 帖子，因为您的消息不知何故从 Youtube 中消失了。请参阅有关旋转计算的说明，因为它在 youtube 上非常棘手:https://youtu.be/M251H8RLr3Q
请记住，旋转选项是可编写脚本的，因此您可以利用它创建一个函数来计算它。
您很接近，但您需要使用 datalabels 插件中的旋转选项。
以下是一些重要的项目:
Angular 起点是 90 度，从那里开始你可以通过知道切片的百分比来计算。您需要从 360 度 Angular 计算它。最好是观看视频以了解更深入的解释。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Big Commerce', 'CRM', 'ZOHO'],
        datasets: [{
            label: 'My First Dataset',
            data: [300, 50, 100], 
            //  == 360 450 (300 / 450) 66 == 120 + 90 // 120 / 3 = 40 / 2 = 20
            // 100 = 80 = 40
            backgroundColor: [
              'rgb(255, 99, 132)',
              'rgb(54, 162, 235)',
              'rgb(255, 205, 86)'
            ],
          datalabels: { 
            rotation: [210, 350, 50]
          }
        },
        {
          label: 'My Second Dataset',
          data: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
          backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 99, 132)',
            'rgb(255, 99, 132)',
            'rgb(255, 99, 132)',
            'rgb(255, 99, 132)',
            'rgb(255, 99, 132)',
            'rgb(255, 99, 132)',
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            'rgb(255, 205, 86)'
          ],
          datalabels: {
            // 30 = 360 = 8.33% 
            // 90 = 25% 
            
            // 90 = base
            // 30 / 2 = 15
            // 90 + 15 = 105
            // 90 + 30 + 30
            // 90 + 30 + 15 = 
            rotation: [105, 135, 165, 195, 225, 255, 285, 315, 345, 15, 45, 75]
          }
        }, 
        {
          label: 'My Third Dataset',
          data: [10, 50, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
          backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)'
          ],
        }]
      },
    plugins: [ChartDataLabels],
    options: {}
});