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

【问题标题】：c3.js - Execute only after c3 has generated datac3.js - 仅在 c3 生成数据后执行
【发布时间】：2015-09-23 11:53:28
【问题描述】：

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

目前，该图标实现了一些随机超时，由于等待图标消失，c3 图表仍未呈现。

我想让那个等待图标保持旋转，并且只有在渲染 c3 图表后才会消失。不知道该怎么做。

【问题讨论】：

你能添加一些你做过的代码吗？
@Sarjan Desai - 有很多代码，不知道要粘贴什么。我的问题是我面临的问题的要点。
仅相关代码..无需添加所有代码...

标签： javascript angularjs c3.js

【解决方案1】：

请检查以下sn-p

$.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>

【讨论】：

【解决方案2】：

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

例如：

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

【讨论】：

请为您的答案提供源代码示例。否则，这篇文章似乎没有为问题提供quality answer。请编辑您的答案，或将其作为对问题的评论发布。