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

问题描述

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

我想实现这样的文本方向

解决方法

我还制作了一个与您的问题相关的视频，我看到您也在 youtube 上发送了一条消息。能够找到这篇 Stackoverflow 帖子，因为您的消息不知何故从 Youtube 中消失了。请参阅有关旋转计算的说明，因为它在 youtube 上非常棘手：https://youtu.be/M251H8RLr3Q

请记住，旋转选项是可编写脚本的，因此您可以利用它创建一个函数来计算它。

您已经接近了，但您需要使用数据标签插件中的旋转选项。

以下是一些重要的项目： 角度的起点是 90 度，从那里开始你可以通过知道切片的百分比来计算。您需要从 360 度角计算它。最好是观看视频以了解更深入的解释。

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],backgroundColor: [
            'rgb(255,86)',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,}]
      },plugins: [ChartDataLabels],options: {}
});