嘿，别着急！你找的方向其实是对的，只是可能在属性名或者配置位置上踩了小坑——毕竟Chart.js版本更新后有些属性名有变化，新手很容易碰到这个问题。下面给你一个和官网示例风格一致的完整可运行代码，帮你搞定平滑边缘的雷达图：

HTML部分 #

先准备一个canvas容器，图表会渲染在这里：

<canvas id="smoothRadarChart" width="400" height="400"></canvas>

JavaScript部分 #

核心的图表配置来了，重点看dataset里的平滑相关属性：

// 获取canvas元素的绘图上下文
const ctx = document.getElementById('smoothRadarChart').getContext('2d');

// 初始化雷达图
const radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        // 雷达图的各个轴标签
        labels: ['速度', '力量', '防御', '敏捷', '耐力', '精准'],
        datasets: [{
            label: '玩家属性',
            // 对应每个标签的数据值
            data: [80, 65, 70, 90, 75, 85],
            // 填充区域的半透明颜色
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            // 线条颜色
            borderColor: 'rgba(54, 162, 235, 1)',
            // 线条宽度
            borderWidth: 2,
            // 数据点的半径
            pointRadius: 4,
            // 数据点的填充色
            pointBackgroundColor: '#fff',
            // 数据点的边框色
            pointBorderColor: 'rgba(54, 162, 235, 1)',
            // 关键！控制线条平滑度：0是完全直线，1是最平滑，0.4左右效果接近官网示例
            tension: 0.4,
            // 可选：让线条拐角更圆润
            borderJoinStyle: 'round'
        }]
    },
    options: {
        scales: {
            r: {
                // 雷达图网格线的样式
                grid: {
                    color: 'rgba(0, 0, 0, 0.1)'
                },
                pointLabels: {
                    // 标签文字大小
                    font: {
                        size: 14
                    }
                }
            }
        }
    }
});

关键注意点 #

1. 属性名版本差异：Chart.js 3.0+版本里，平滑属性叫tension；如果你用的是2.x旧版本，需要改成lineTension才能生效。
2. 配置位置：这个平滑属性必须写在datasets数组的具体数据集对象里，而不是全局的options中，这是新手最容易搞错的地方。
3. 平滑度调整：tension取值范围是0到1，值越大线条弯曲程度越高，你可以根据自己的视觉需求微调数值。

如果运行后还是没有平滑效果，先检查一下你的Chart.js版本，确保引入的是正确的库文件哦～

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