Chart.js PolarArea图表：数据数字移至上方及刻度配置咨询

问题1：在图表区域上方显示数据数字 #

可以通过chartjs-plugin-datalabels插件实现这个效果，具体配置如下：

首先引入插件（CDN方式）：

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

然后在图表配置中启用插件并设置标签位置：

const ctx = document.getElementById('myPolarAreaChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['标签1', '标签2', '标签3', '标签4', '标签5'],
        datasets: [{
            data: [30, 50, 70, 20, 90],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
        }]
    },
    plugins: [ChartDataLabels],
    options: {
        plugins: {
            datalabels: {
                align: 'end',
                offset: 20,
                font: {
                    size: 16,
                    weight: 'bold'
                },
                formatter: (value) => value
            }
        }
    }
});

这样就能把每个数据值显示在对应区域的外侧上方，符合你要的效果。

问题2：刻度间隔显示20，但保持10个圆环 #

通过配置极坐标刻度的ticks属性即可实现，设置stepSize控制圆环数量，用callback过滤显示的刻度：

options: {
    scales: {
        r: {
            ticks: {
                stepSize: 10,
                callback: (value) => {
                    // 只显示20的倍数刻度
                    return value % 20 === 0 ? value : null;
                }
            }
        }
    }
}

将这段配置添加到图表的options中，就能实现刻度只显示0、20、40、60、80、100，同时保持10个圆环的效果。

内容的提问来源于stack exchange，提问作者Deny Tb