c3.js

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>

Answer 2

只需使用onrendered功能即可隐藏忙碌图标。这也会为您的图表添加动画效果

例如：

onrendered: function() {
    d3.selectAll(".c3-axis.c3-axis-x .tick text")
        .style("display", "none");
}

c3.js - c3产生数据后才执行

c3.js - Execute only after c3 has generated data

javascript

angularjs