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>