是否有針對折線圖的 Google 可視化“animationstart”的解決方法？

Question

我有一個頁面，里面有多個不同類型的圖表，除了一個例外，所有圖表都很好用。 其中之一是折線圖，這是一種可以動畫的圖表。 當用戶為折線圖選擇新的日期范圍時，我可以在應用程序獲取新數據的同時打開“加載”疊加層和微調器，一切都很好。 問題是我想在動畫開始時關閉這個覆蓋，但是沒有animationstart事件（我發現了）。

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

我可以在 animationfinish 上關閉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);

請記住，隨着動畫的播放，觀察者的函數將繼續被調用。
檢查覆蓋層是否打開，如果是，關閉它。 否則，什么都不做……