Chart.js 4.1.1 Y轴min/max设置无效及模块语法报错求助

一、控制台语法错误原因及修复 #

报错Uncaught SyntaxError: Cannot use import statement outside a module由两个问题导致：

• 重复引入了Chart.js的不同版本（chart.min.js和chart.umd.js），二者加载逻辑冲突触发错误
• 使用type="module"的脚本无法直接访问全局jQuery变量$，模块作用域与全局作用域隔离

修复步骤：

• 移除其中一个Chart.js引入，保留chart.umd.js即可（UMD格式兼容全局和模块环境）
• 移除脚本的type="module"属性，让代码运行在全局作用域，确保能正常使用$

二、Y轴min/max刻度不生效的原因及修复 #

Y轴刻度设置无效的核心问题是数据为字符串类型，Chart.js无法正确解析字符串数值进行刻度计算，导致min/max/suggestedMin/suggestedMax参数不起作用。

修复步骤：

• 将所有data中的字符串数值转换为纯数字（比如"10000000"改为10000000）
• 在scales.y配置项中添加min和max参数，设置你需要的刻度范围

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.1/chart.umd.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 确保jQuery已引入 -->

<canvas id="myChart" height="280px"></canvas>
<script>
$(window).on("load",function() {
    var ctxChart = document.getElementById("myChart");
    ctxChart.height = 120;
    var myChart = new Chart(ctxChart, {
        type: "bar",
        data: {
            labels: ["09/Aug/2021", "16/Aug/2021", "06/Sep/2021", "14/Oct/2021", "19/Oct/2021"],
            datasets: [
                {
                    label: "Max and Min - Day",
                    data: [[10000000, 10000000], [10000000, 10000000], [15000000, 10000000], [10000000, 10000000], [22000000, 22000000]],
                    backgroundColor: "rgb(74,152,176, 0.5)",
                    order: 1
                },
                {
                    label: "Day Avg",
                    data: [10000000, 10000000, 12500000, 10000000, 22000000],
                    borderColor: "rgb(191,110,131)",
                    backgroundColor: "rgb(191,110,131)",
                    type: "line",
                    order: 0,
                    pointRadius: 5,
                    pointHoverRadius: 5
                },
                {
                    label: "Global Avg",
                    data: [16000000, 16000000, 16000000, 16000000, 16000000],
                    borderColor: "rgb(244,209,76)",
                    backgroundColor: "rgb(244,209,76)",
                    type: "line",
                    order: 0,
                    pointRadius: 3,
                    pointHoverRadius: 3
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: "top",
                },
                title: {
                    display: true,
                    text: "Price"
                },
                subtitle: {
                    display: true,
                    text: "example.com"
                }
            },
            scales: {
                y: {
                    title: {
                        display: true,
                        text: "$"
                    },
                    min: 5000000, // 设置Y轴最小刻度
                    max: 25000000 // 设置Y轴最大刻度
                    // 如果不想强制锁定范围，可用suggestedMin/suggestedMax：
                    // suggestedMin: 5000000,
                    // suggestedMax: 25000000
                }
            }
        }
    });
});
</script>

补充说明 #

• 如果需要使用模块模式（type="module"），需改用Chart.js的ES模块版本，并通过import Chart from 'chart.esm.js'引入，同时确保jQuery也通过模块方式引入
• suggestedMin/suggestedMax是建议刻度范围，Chart.js会根据数据自动调整；min/max是强制锁定范围，数据超出时会被截断显示

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