javascript - c3.js - 仅在c3生成数据后执行

Question

我正在生成 c3 图表，在绘制图表期间，我需要显示一个等待图标。

目前，图标是通过一些随机超时实现的，由于等待图标消失，c3 图表仍然没有呈现。

我想让那个等待图标一直旋转，并且应该只在 c3 图表呈现后消失。不知道该怎么做。

Answer 1

请检查以下片段

$.blockUI()

setTimeout(function () {
    var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    },
      onrendered: function(){ //after chart is rendered
        $.unblockUI();
      }
});
}, 1000);

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>

<div id="chart"><img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />Waiting..</div>