如何在d3中隐藏加载图后的加载图像

how to hide loading image after load chart in d3?

本文关键字：加载 图像 隐藏 d3      更新时间：2023-09-26

 $(document).on('click', '.tbtn', function(e) {
    $('#loading-image').show();
    if(error){
    $('loading-image').hide();
   else{
    val = $('.barbtn input:checked').val();  
    draw_summary($.parseJSON(data['summary']),val);
    draw_barchart($.parseJSON(data['barchart']),val);
    draw_scatter($.parseJSON(data['table']),val);
    $('#loading-image').show();
  }
});

这里我用d3绘制图表…图表来的很正确，但我需要设置加载图像，当我点击按钮时。。。该代码不起作用

单击按钮时如何设置加载图像？

你只需要为它设置CSS。否则你就走对了路。请检查下面的片段。

$(document).on('click', '.tbtn-hide', function(e) {
	$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
    $('#loading-image').show(); //show loader
});
#loading-image
    {
        background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
        height: 80%;
        left: 0;
        position: fixed;
        top: 10;
        width: 100%;
        z-index: 9999;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>

$(document).on('click', '.tbtn', function(e) {
  $('#loading-image').show();
  $.ajax({
    success:function(result){
      val = $('.barbtn input:checked').val();  
      draw_summary($.parseJSON(data['summary']),val);
      draw_barchart($.parseJSON(data['barchart']),val);
      draw_scatter($.parseJSON(data['table']),val);
      $('#loading-image').hide();
    }
  });
});

相关文章：