Chart.js 4.2.1版本雷达图创建报错 求4.x版本可用示例

问题情况 #

• 使用jsdelivr提供的Chart.js CDN链接时，雷达图可正常运行；
• 切换到cdnjs的4.2.1版本链接时，控制台报错“chart.js第7行出现unexpected token "{"”；
• 测试代码在Chart.js 4.0+版本无法正常运行，找不到可用示例。

原因分析 #

cdnjs默认提供的chart.js文件是ES模块版本，直接用普通<script>标签引入时，浏览器会把模块代码当作普通JS解析，导致ES模块特有的语法（如import/export、解构）被误判，抛出语法错误。而jsdelivr默认提供的是UMD版本，兼容普通<script>引入方式。

另外，Chart.js 4.x对雷达图的轴配置做了调整：原来的scales.y需要改为scales.r，这也是容易忽略的配置问题。

解决方案 #

有两种可行的解决方式：

方式1：使用ES模块引入 #

给<script>标签添加type="module"属性，并导入正确的ES模块版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Radar Chart</title>
</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>

    <script type="module">
        import { Chart } from 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.esm.js';
        
        const ctx = document.getElementById('myChart');
        new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: 'Whatever 1',
                    data: [12, 19, 23, 5, 32, 3],
                    borderWidth: 1
                }, {
                    label: 'Whatever 2',
                    data: [12, 1, 22, 15, 2, 23],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    r: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

方式2：使用UMD版本链接 #

直接改用cdnjs提供的UMD版本文件，无需修改script标签类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Radar Chart</title>
</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>
    <script>
        const ctx = document.getElementById('myChart');
        new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: 'Whatever 1',
                    data: [12, 19, 23, 5, 32, 3],
                    borderWidth: 1
                }, {
                    label: 'Whatever 2',
                    data: [12, 1, 22, 15, 2, 23],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    r: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

关键注意点 #

Chart.js 4.x中，雷达图的轴配置从scales.y改为了scales.r，如果保留旧配置，雷达图的刻度会显示异常，这是版本升级后的重要变更。

内容的提问来源于stack exchange，提问作者CH-Developer