加载图表时显示旋转图像

Show spin image while loading chart

本文关键字：旋转 图像 显示 加载      更新时间：2023-09-26

我想在加载dygraphs图时显示一个旋转器(来自spin.js)。到目前为止，它的工作，但我不能使它的自旋图像显示在div中，其中图表被渲染。如果我使用另一个空div容器('testdiv')作为我的自旋-一切都很好。

下面是我的代码:

<input type="radio" id="r1" name="radiogroup" value="2012" checked="checked" />2012
<input type="radio" id="r2" name="radiogroup" value="2013" />2013
<div id="graph1" style="width:700px; height:400px;"></div>
<div id="testdiv"></div>
<script type="text/javascript">
$(document).ready(function() {
  $("input[name=radiogroup]:radio").click(function() {
    var target = document.getElementById('testdiv');
    var spinner = new Spinner().spin(target);
    var year = $(this).val()
    var g1 = new Dygraph(
      document.getElementById("graph1"),year+".csv",
      { }
    );
    g1.ready(function () {
      spinner.stop();
    });
  });
  $("input:radio[name=radiogroup][value=2012]").click();   
});
</script>

所以，如果我把这行改为div "graph1"它就停止工作了:

var target = document.getElementById('graph1');

看小提琴:http://jsfiddle.net/hp4t8hap/

我不确定是最好的主意，但我使用了drawCallback函数，现在如果它是第一次回调:

drawCallback: function(dygraph, isInitial) { if(isInitial) $("#loading").slideUp(function() { $("input[type='checkbox']").removeAttr("readonly"); canLoadData = true; $("button").removeAttr("disabled"); $("button > i").remove(); }); },

相关文章：