Chartjs极地曲线标签答案

【问题标题】：Chartjs polar area curved labelsChartjs极地曲线标签
【发布时间】：2022-10-07 06:40:44
【问题描述】：

我正在尝试使用 Chart.js 为极地区域图创建弯曲标签，如下所示：

我在他们讨论的地方找到了this issue，但似乎还没有答案。

到目前为止，我只能在图表的一侧显示标签，但不能以弯曲的方式显示：

Chart.register( ChartDataLabels );


const config = {
    \"type\": \"polarArea\",
    \"data\": {
        \"labels\": [
            \"aaaaaaaa\",
            \"bbbbbbbb\",
            \"cccccccc\",
            \"dddddddd\",
            \"eeeeeeee\",
            \"ffffffff\",
            \"gggggggg\",
            \"hhhhhhhh\"
        ],
        \"datasets\": [
            {
                \"data\": [
                    80,
                    40,
                    54,
                    62,
                    71,
                    45,
                    50,
                    85
                ],
                \"backgroundColor\": [
                    \"#674ea7\",
                    \"#db4b4b\",
                    \"#2f2f6e\",
                    \"#3c1414\",
                    \"#fc3631\",
                    \"#556b2f\",
                    \"#820000\",
                    \"#76a5af\"
                ]
            }
        ]
    },
    \"options\": {
        \"responsive\": true,
        \"scales\": {
            \"r\": {
                \"angleLines\": {
                    \"display\": true
                },
                \"ticks\": {
                    \"display\": false
                },
                \"pointLabels\": {
                  \"display\": true,
                  \"centerPointLabels\": true,
                  \"font\": {
                    \"size\": 14
                  }
                }
            }
        },
        \"scale\": {
            \"min\": 0,
            \"max\": 100,
            \"ticks\": {
                \"display\": false,
                \"beginAtZero\": true
            }
        },
        \"plugins\": {
            \"legend\": {
                \"position\": \'top\',
            },
            \"datalabels\": {
                \"formatter\": (value, context) => value + \'%\',
                \"color\": \"#ffffff\"
            }
        }
    }
}

const ctx = document.getElementById( \'graph\' ).getContext( \'2d\' );

const chart = new Chart( ctx, config );

有谁知道该怎么做？

标签： javascript charts chart.js

【解决方案1】：

您可以使用chartjs-plugin-labels 来实现这一点

你可以看到working example here

关键是在插件选项中将arc设置为true和position设置为outside。例如

{
  labels: {
    render: 'label',
    arc: true,
    fontColor: '#000',
    position: 'outside'
  }
}

【讨论】：