You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Chart.js中min/max设置失效,如何固定坐标轴范围禁止自动缩放?

解决Chart.js散点图固定轴范围不生效的问题

你的问题出在轴配置的结构错误以及min/max的配置位置不对,以下是具体分析和修正方案:

问题根源

  1. scales配置结构错误:你把x、y轴的配置写成了数组[{...}],但Chart.js中单个轴的配置应该是对象而非数组。
  2. min/max配置位置错误:你将轴范围的min和max写在了ticks选项下,ticks.min/max仅控制显示哪些刻度,并非轴的实际范围。轴的有效范围需要直接配置在轴的根选项中。

修改后的完整代码

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Mass & Balance Envelope",
            data: [],
            backgroundColor: 'red'
        }]
    },
    options: {
        tooltips: {
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            titleFontSize: 16,
            bodyFontSize: 14
        },
        display: false,
        scales: {
            x: { // 改为对象格式,移除数组包裹
                type: 'linear',
                position: 'bottom',
                min: 21, // 直接在轴配置下设置范围
                max: 37,
                adaptive: false, // 强制禁用轴的自动适配逻辑
                ticks: {
                    // 可在此添加刻度样式相关配置,如字体、颜色等
                }
            },
            y: { // 改为对象格式,移除数组包裹
                type: 'linear',
                position: 'left',
                min: 520, // 直接在轴配置下设置范围
                max: 780,
                adaptive: false, // 强制禁用轴的自动适配逻辑
                ticks: {
                    // 可在此添加刻度样式相关配置
                }
            }
        }
    }      
});

setInterval(function() {
    var dot1_x = vypocet_vahy_lietadla_funkcia();
    var dot1_y = vypocet_pozicie_taziska_SAT_funkcia();
    var dot2_x = vypocet_vahy_lietadla_0fuel_funkcia();
    var dot2_y = vypocet_pozicie_taziska_SAT_0fuel_funkcia();
    chart.data.datasets[0].data = [
        {x: dot1_y, y: dot1_x, label: "TO Weight and Balance"},
        {x: dot2_y, y: dot2_x, label: "0 Fuel Weight and Balance"}    
    ];
    chart.update('none'); // 使用none模式更新,跳过自动缩放逻辑
}, 1000);

关键修改说明

  • 修正scales下轴的配置格式,从数组改为对象,符合Chart.js的配置规范。
  • 将轴范围的min/max移到轴的根配置项,直接控制轴的显示边界。
  • 添加adaptive: false,强制禁用轴根据数据自动调整范围的逻辑。
  • 更新图表时使用chart.update('none'),该模式仅更新数据点,不会触发轴的自动重算。

修改完成后,X轴会固定在21-37区间,Y轴固定在520-780区间,不会随数据变化自动缩放。

内容的提问来源于stack exchange,提问作者F41C0N

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 04:25:03