如何在Chart.js 4.4.0中获取坐标轴的实际最小/最大值？

可以实现，具体方法是通过图表实例的scales属性获取对应坐标轴的min和max属性，这些值就是图表渲染时自动计算出的实际边界值（而非刻度的最小/最大值）。

注意事项 #

必须在图表渲染完成后获取这些值，因为它们是在图表渲染阶段动态计算的。

代码示例 #

假设你的图表实例为myChart，目标坐标轴的ID为x（默认X轴ID为x，Y轴默认是y，多轴场景需替换为对应轴的ID）：

方式1：在渲染完成回调中获取

// 初始化图表时配置渲染完成回调
const myChart = new Chart(document.getElementById('myChart'), {
  // 图表配置项...
  options: {
    plugins: {
      afterRender: function(chart) {
        const xAxis = chart.scales['x'];
        const actualXMin = xAxis.min;
        const actualXMax = xAxis.max;
        console.log('X轴实际最小值:', actualXMin);
        console.log('X轴实际最大值:', actualXMax);
      }
    }
  }
});

方式2：在图表渲染完成后手动获取（比如按钮点击事件）

// 确保图表已渲染完成，比如在按钮点击事件中
document.getElementById('getAxisRange').addEventListener('click', function() {
  const xAxis = myChart.scales['x'];
  const actualXMin = xAxis.min;
  const actualXMax = xAxis.max;
  alert(`X轴实际范围：${actualXMin} ~ ${actualXMax}`);
});

说明 #

• 这里的min和max是图表自动计算后的实际坐标轴边界值，比如你提到的刻度为整数但实际右边界是x=10.5的场景，xAxis.max会返回10.5而非刻度最大值10。
• 对比Flot.js的实现逻辑，Chart.js的写法和Flot类似：Flot用plot.getAxes().xaxis.min，Chart.js用chart.scales['x'].min。

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