无法使用滚动显示(Scrolltop)为具有不同数据集的C3图表设置动画

// 导入C3图表库
import c3 from 'c3';

// 定义数据集
const data1 = [10, 20, 30, 40, 50];
const data2 = [50, 40, 30, 20, 10];

// 创建C3图表
const chart = c3.generate({
  bindto: '#chart', // 绑定到指定的HTML元素
  data: {
    columns: [
      ['Data 1', ...data1],
      ['Data 2', ...data2]
    ],
    type: 'line' // 图表类型为折线图
  },
  transition: {
    duration: 1000 // 设置动画持续时间为1秒
  }
});

// 监听滚动事件
window.addEventListener('scroll', () => {
  const chartElement = document.querySelector('#chart');
  const chartTop = chartElement.getBoundingClientRect().top;
  const windowHeight = window.innerHeight;

  // 当图表元素进入可视区域时，触发动画
  if (chartTop < windowHeight) {
    chart.transform('bar'); // 切换图表类型为柱状图
  }
});