Javascript 谷歌可视化是否有解决办法；动画开始'；对于折线图？

我有一个页面，有多种不同类型的图表，除了一个例外，所有图表都很好用。其中之一是折线图，它是一种可以设置动画的图表。当用户为折线图选择一个新的日期范围时，我可以在应用程序获取新数据时打开一个“加载”覆盖和微调器，一切正常。问题是我想在动画开始时关闭此覆盖，但没有

animationstart

事件（我已找到）

我可以在

animationfinish

上关闭动画，但效果是（执行得很漂亮的）动画出现在微调器和叠加的后面。有人会认为我可以在获取数据时关闭“加载”覆盖（我可以这样做），但问题是如果动画图表不需要获取新数据，就像过滤当前时间范围一样，“加载”覆盖将永远不会关闭

---

有人对我如何在

animationstart

上执行操作有什么想法吗？

您可以使用

MutationObserver

动画开始后，观察者将开始报告图表容器的更改

var container = document.getElementById('chart');
var chart = new google.visualization.LineChart(container);

// mutation observer
var observer = new MutationObserver(function () {
  // close overlay
});
observer.observe(container, {
  childList: true,
  subtree: true
});

chart.draw(data, options);

请记住，随着动画的播放，观察者的函数将继续被调用。

---

检查覆盖是否打开，如果打开，请将其关闭。否则，什么也不做…

您可以使用

变异观察者

动画开始后，观察者将开始报告图表容器的更改

var container = document.getElementById('chart');
var chart = new google.visualization.LineChart(container);

// mutation observer
var observer = new MutationObserver(function () {
  // close overlay
});
observer.observe(container, {
  childList: true,
  subtree: true
});

chart.draw(data, options);

请记住，随着动画的播放，观察者的函数将继续被调用。
检查覆盖是否打开，如果打开，请将其关闭。否则，什么也不做