在Chartist图表

Question

我正在尝试在Chartist图表下添加一段文字。然而，似乎Chartist推迟了DOM元素的实际创建，直到未知的未来点。

期望：

• 创建新的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元素，但是如果你有一些约束要求你用这种方式构建它，你可以.append（）你的段落到Chartist的.thing .on（'draw'）方法。

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>

Answer 2

我遇到了这个问题，因为我自己需要一个项目。

@ brianrhea答案的问题是你会为系列数组中的每一项附加p标签。如果您只想一次使用以下代码附加它

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

var chart = new Chartist.Pie('.thing', data);
chart.on('draw', function (data) {
    if (data.index === 0) {
         $('.thing').append("<p>should appear after/below chart!</p>");
    }
});

Answer 3

有一个created事件似乎很适合这份工作。

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

var chart = new Chartist.Pie('.thing', data);
chart.on('created', function(){
    $(id).append("<p>should appear after/below chart!</p>");
});