如何为ChartJS+ChartJS Zoom插件的图表设置初始缩放值

实现逻辑 #

chartjs-plugin-zoom 1.x版本无内置初始缩放配置项，你可以在图表实例化完成后，手动调用插件提供的缩放API实现需求，同时可通过判断屏幕宽度，仅在移动端小屏场景下触发初始缩放。

修改代码 #

在你现有JS代码的最后（即实例化myChart之后）添加如下逻辑即可：

// 自定义移动端阈值，可根据需求调整
const isMobile = window.innerWidth < 768;
if (isMobile) {
  // 初始展示的数据条数，可在5-10区间自定义
  const initialShowCount = 7;
  // 计算展示最新N条数据的索引范围，若要展示最前面的N条，修改为min:0, max: initialShowCount-1即可
  const xRange = {
    min: labels.length - initialShowCount,
    max: labels.length - 1
  };
  // 调用zoom接口设置x轴显示范围
  myChart.zoom.scale('x', xRange);
}

说明 #

• 上述代码默认初始显示最新的7条数据，你可以修改initialShowCount的值调整初始展示条数，也可以修改xRange的取值自定义初始显示的区间。
• 你原有配置中已经开启了x轴平移、缩放能力，设置后用户可自行滑动查看全量30条数据，符合你的交互需求。

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