如何实现Highcharts在滚动进入视图时触发动画而非仅页面加载时？

当然可以实现这个需求！这是个很实用的交互优化，咱们一步步来搞定它：

核心思路 #

默认Highcharts会在页面加载时就执行动画，咱们要做的就是先关闭默认动画，然后通过监听滚动事件，判断图表容器是否进入当前视口，当它出现在视野里时再触发动画（或者延迟初始化图表）。

具体实现步骤 #

1. 给图表容器加标识 #

先给每个包含图表的容器统一加个类名，比如chart-container，方便后续获取元素：

<div class="chart-container" id="chart1"></div>
<div class="widget">...</div>
<div class="chart-container" id="chart3"></div>
<div class="widget">...</div>
<div class="chart-container" id="chart5"></div>

2. 编写视口检测函数 #

首先需要一个工具函数，用来判断元素是否已经进入当前视口：

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  // 判断元素的上下左右是否在视口范围内
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

3. 方案一：延迟初始化图表（推荐） #

这种方式更高效，因为只有图表进入视口时才会初始化它，节省页面加载资源：

// 先把所有图表的配置存在数组里，不要立即初始化
const chartConfigs = [
  {
    chart: {
      type: 'line',
      animation: false // 先关闭默认动画
    },
    title: { text: '图表1' },
    series: [{ data: [1, 3, 2, 4, 5] }]
    // 其他配置项...
  },
  {
    chart: {
      type: 'column',
      animation: false
    },
    title: { text: '图表3' },
    series: [{ data: [5, 2, 7, 3, 1] }]
    // 其他配置项...
  },
  {
    chart: {
      type: 'pie',
      animation: false
    },
    title: { text: '图表5' },
    series: [{ data: [{name: 'A', y: 30}, {name: 'B', y: 70}] }]
    // 其他配置项...
  }
];

// 监听滚动事件，检测视口
let scrollTimer;
window.addEventListener('scroll', () => {
  // 加节流，避免频繁触发影响性能
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    document.querySelectorAll('.chart-container').forEach((container, index) => {
      // 只有未初始化且进入视口的图表才处理
      if (isElementInViewport(container) && !container.dataset.initialized) {
        // 复制配置并开启动画
        const config = {...chartConfigs[index]};
        config.chart.animation = { duration: 1000 }; // 设置动画时长，可自定义
        // 初始化图表
        Highcharts.chart(container, config);
        // 标记为已初始化，防止重复触发
        container.dataset.initialized = 'true';
      }
    });
  }, 100);
});

// 页面加载完成后主动触发一次滚动检测，避免首屏图表没触发
window.addEventListener('load', () => {
  window.dispatchEvent(new Event('scroll'));
});

4. 方案二：先初始化图表，滚动时触发动画 #

如果因为业务需求必须提前初始化图表，可以用这种方式，先关闭动画，进入视口时再开启并触发重绘：

// 先初始化所有图表，关闭默认动画
const charts = [];
document.querySelectorAll('.chart-container').forEach((container, index) => {
  const chart = Highcharts.chart(container, {
    chart: { type: index === 0 ? 'line' : index ===1 ? 'column' : 'pie', animation: false },
    title: { text: `图表${index*2+1}` },
    series: index ===0 ? [{data: [1,3,2,4,5]}] : index ===1 ? [{data: [5,2,7,3,1]}] : [{data: [{name:'A',y:30},{name:'B',y:70}]}]
    // 其他配置项...
  });
  charts.push(chart);
});

// 监听滚动事件触发动画
let scrollTimer;
window.addEventListener('scroll', () => {
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    charts.forEach((chart, index) => {
      const container = chart.container;
      if (isElementInViewport(container) && !container.dataset.animated) {
        // 更新配置，开启动画并重绘
        chart.update({
          chart: { animation: { duration: 1000 } },
          plotOptions: { series: { animation: { duration: 1000 } } }
        }, true); // true表示立即重绘
        container.dataset.animated = 'true';
      }
    });
  }, 100);
});

window.addEventListener('load', () => {
  window.dispatchEvent(new Event('scroll'));
});

额外注意事项 #

• 节流优化：上面的代码加了100毫秒的节流，你可以根据实际需求调整时长，平衡性能和交互灵敏度。
• 窗口 resize 处理：如果用户调整窗口大小，可能会导致图表进入/离开视口，建议额外监听resize事件，同样触发检测逻辑。
• 动态内容适配：如果页面有动态加载的内容，记得在内容加载完成后重新触发一次滚动检测。

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