Блог

У меня есть страница с несколькими диаграммами различных типов, все они отлично работают, за одним исключением. Одним из них является линейная диаграмма, которая представляет собой тип диаграммы, которую можно анимировать. Когда пользователь выбирает новый диапазон дат для линейной диаграммы, я могу открыть «загрузочный» оверлей и счетчик, пока приложение получает новые данные, все хорошо. Проблема в том, что я хочу закрыть это наложение при запуске анимации, но animationstart события (которое я нашел) нет.)

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

Я могу закрыть анимацию 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);
 

имейте в виду, что функция наблюдателя будет продолжать вызываться по мере завершения анимации.
проверьте, открыто ли наложение, если да, закройте его. в противном случае ничего не делайте…