如何获取Chart.js缩放后图表的坐标轴局部极值

当使用Chart.js结合chartjs-plugin-zoom插件时，可以通过以下方式实时获取当前视图下x、y轴的边界值：

1. 直接访问图表实例的轴属性 #

初始化图表后，你可以随时通过图表实例的scales对象获取当前轴的实时最值：

// 假设你的图表实例是myChart
const xCurrentMin = myChart.scales.x.min;
const xCurrentMax = myChart.scales.x.max;
const yCurrentMin = myChart.scales.y.min;
const yCurrentMax = myChart.scales.y.max;

注意：如果你的轴有自定义ID（比如x-axis-0），需要替换为对应的轴ID，例如myChart.scales['x-axis-0'].min。

2. 在缩放/平移事件中实时监听 #

借助chartjs-plugin-zoom的事件钩子，可以在缩放或平移操作发生时自动获取最新的轴边界值：

const myChart = new Chart(document.getElementById('myChart'), {
  // 图表配置和数据...
  options: {
    plugins: {
      zoom: {
        zoom: {
          enabled: true,
          mode: 'xy',
          // 缩放完成时触发
          onZoom: ({ chart }) => {
            const xMin = chart.scales.x.min;
            const xMax = chart.scales.x.max;
            const yMin = chart.scales.y.min;
            const yMax = chart.scales.y.max;
            console.log('缩放后X轴范围:', xMin, xMax);
            console.log('缩放后Y轴范围:', yMin, yMax);
            // 在这里可以做你需要的逻辑处理，比如更新显示等
          }
        },
        pan: {
          enabled: true,
          mode: 'xy',
          // 平移完成时触发
          onPan: ({ chart }) => {
            const xMin = chart.scales.x.min;
            const xMax = chart.scales.x.max;
            const yMin = chart.scales.y.min;
            const yMax = chart.scales.y.max;
            console.log('平移后X轴范围:', xMin, xMax);
            console.log('平移后Y轴范围:', yMin, yMax);
          }
        }
      }
    }
  }
});

这些获取到的min和max值就是当前屏幕显示区域对应的轴局部边界，和全局数据的最值完全区分开，能满足你实时获取当前视图y轴最大值的需求。

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