javascript - 在 Chartist 图表后添加元素

Question

我正在尝试在 Chartist 下方添加一段文字图表。然而，Chartist 似乎将 DOM 元素的实际创建推迟到某个未知的 future 时间点。

期望:

• 创建新的 Chartist 图表，然后
• 在图表后追加元素到dom
• 图表出现在 DOM 元素之前

实际:

• 图表出现在 DOM 中的元素之后

如何让我的元素出现在图表之后？我看到一个事件 API，但它们没有列出是否有任何“完成”或“添加”事件。

var data = {
  series: [5, 3, 4]
};

new Chartist.Pie('.thing', data);

$('.thing').append("<p>should appear after/below chart!</p>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.js"></script>
<div class="thing"></div>

Answer 1

正如@blm 所建议的，您可以添加一个额外的 DOM 元素，但以防万一您有一些限制要求您以这种方式构建它，您可以将您的段落添加到 .thing。

var data = {
  series: [5, 3, 4]
};

var chart = new Chartist.Pie('.thing', data);

chart.on('draw', function(){
    $('.thing').append("<p>should appear after/below chart!</p>")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.4/chartist.js"></script>
<div class="thing"></div>