3

我正在尝试在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>

4

3 回答 3

2

正如@blm 建议的那样，您可以添加一个额外的 DOM 元素，但以防万一您有一些约束要求您以这种方式构建它，您可以 .append() 将段落添加到.thingChartist 的 .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>

于 2015-11-09T23:19:41.483 回答
1

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

@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>");
    }
});
于 2016-03-29T21:22:45.413 回答
0

有一个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>");
});
于 2020-03-18T12:40:29.900 回答