如何显示 vis.js 图表的正在进行的加载答案

【问题标题】：how to show load in progress for vis.js chart如何显示 vis.js 图表的正在进行的加载
【发布时间】：2016-08-09 05:41:42
【问题描述】：

首次访问vis.js时间线图。用户的浏览器需要下载 vis.js 库。显示图表需要一些时间。我想知道如何在图表完全加载之前显示消息或动画图像。

图表完全加载后，让消息或图像淡出。

提前致谢。

【问题讨论】：

选项“animationPreload”应该为你做这件事。见这里visjs.org/docs/graph3d
谢谢！时间线图似乎在配置visjs.org/docs/timeline 中没有animationPreload 选项
确实，这并不能解决问题。

标签： javascript jquery html vis.js vis.js-timeline

【解决方案1】：

您应该使用 vis.js 文档中example 中所示的稳定事件。它为您提供了如何实现加载栏的示例，但您也可以使用此机制来实现其他解决方案。

【讨论】：

【解决方案2】：

我已经通过在时间轴选项中使用onInitialDrawComplete 回调解决了这个问题。

显示您想要的任何加载器机制，然后在触发时将其与时间线交换。

【讨论】：

【解决方案3】：

如果您想在整个 html 加载完成之前做某事，这里有一个解决方案可以帮助您： How can I display a loading gif until an entire html page has been loaded

我还在我的一个项目中使用 vis.js 时间线，并且我正在使用 ajax 将数据从服务器获取到时间线中。对于这种进度演示，我使用了一个 ajax 加载器，就像这样，它完美地工作：

在部分：

<script>
$( function() {
    var $loading = $('#loadingDiv').hide();
    $(document)
      .ajaxStart(function () {
        $loading.show();
      })
      .ajaxStop(function () {
        $loading.hide();
      });
});
</script>

在部分：

<div id="loadingDiv" style="margin-left:auto; margin-right:auto; position:fixed; left: 50%; margin-left:-150px; top:50%; margin-top:-200px; z-index:1000; opacity: 0.35; filter: alpha(opacity=35); ">
<img id="loading-image" src="./ajax-loader.gif" alt="Loading..." />
</div>

【讨论】：