折线图的 Google 可视化 'animationstart' 是否有解决方法？

Question

我有一个包含多个不同类型图表的页面，除了一个例外，所有图表都很好用。其中之一是折线图，这是一种可以制作动画的图表。当用户为折线图选择新的日期范围时，我可以在应用程序获取新数据时打开“加载”叠加层和微调器，一切都很好。问题是我想在动画开始时关闭这个叠加层，但是没有 animationstart 事件（我已经找到了。）

https://developers.google.com/chart/interactive/docs/gallery/linechart#events

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

有人知道我如何在 animationstart 上执行操作吗？

Answer 1

你可以使用 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);

请记住，随着动画的播放，观察者的功能将继续被调用。
检查叠加层是否打开，如果是，请将其关闭。否则，什么都不做...

折线图的 Google 可视化 'animationstart' 是否有解决方法？

Is there a workaround for Google Visualization 'animationstart' for Line Charts?

javascript

charts

google-visualization