Chart.js雷达图：如何让Tooltip显示真实数据而非图表适配数据

要实现雷达图展示适配后的数据，同时Tooltip提示框显示真实数据的需求，你可以通过给数据集添加自定义真实数据字段，再配合Tooltip的回调函数来实现，修改后的代码如下：

<script>
        new Chart(document.getElementById('exampleChartjsRadar').getContext('2d'), {
            type: 'radar',
            data: {
                labels: ["Option1", "Option2", "Option3"],
                pointLabelFontSize: 14,
                datasets: [{
                    label: 'Sporcu',
                    data: [2, 4, 5], // 图表展示的适配数据
                    realData: [200, 400, 500], // 新增自定义字段存储真实数据
                    fill: true,
                    backgroundColor: 'rgba(4, 197, 249, 0.2)',
                    borderColor: 'rgb(4, 197, 249)',
                    pointBackgroundColor: 'rgb(4, 197, 249)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(4, 197, 249)'
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        // 自定义Tooltip的显示内容
                        callbacks: {
                            label: function(context) {
                                // 获取当前项的真实数据
                                const realValue = context.dataset.realData[context.dataIndex];
                                // 返回要显示的文本，格式可自行调整
                                return `${context.dataset.label}: ${realValue}`;
                            }
                        }
                    }
                },
                elements: {
                    line: {
                        borderWidth: 2
                    }
                }
            },
        });
    </script>

关键修改说明： #

• 在datasets中新增realData数组，存储每个选项对应的真实数值，与data数组的索引一一对应
• 在options.plugins.tooltip中配置callbacks.label回调函数，通过context参数获取当前数据项的索引，从realData中取出真实值，替换默认的Tooltip显示内容

内容的提问来源于stack exchange，提问作者Bekir Çelik