3

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 要素を追加することもできますが、この方法で作成する必要がある制約がある場合に備えて、段落を.thingChartist の .on('draw') メソッドに .append() できます.

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 に答える