web-dev-qa-db-ja.com

Angular nvd3折れ線グラフの自動サイズ変更

angular nvd3ディレクティブを使用しています。

例によると： https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives/blob/master/examples/lineChart.with.automatic.resize.html

<!--
width and height are removed from the directive for automatic resizing.
-->

さて、グラフのDivサイズを変更すると。サイズは変更されますが、「コンソールビュー」を移動/オープン/クローズした場合のみです（ctrl + shift + i FFで）。

私はangular-nvd3-directiveをチェックします、サイズ変更のためのイベント呼び出しがないので、それはd3/nvd3comportementだと思いますか？

これまでの私の質問：グラフのサイズを変更するためにこの種のイベントをシミュレートするにはどうすればよいですか？

javascriptangularjsnvd3.jsangularjs-nvd3-directives
17
ssbb

グラフを再描画できる別のサイズ変更イベントを発生させてみることができます。 window.dispatchEvent(new Event('resize'));

同様のアプローチがChart.jsでも機能しました。表示されているコンソールがページを変更するのは奇妙です-それがどのように機能するかをまだ完全には理解していませんが、動的なレイアウトで定期的に表示されます。

8
Dylan Valade

それがあなたに役立つかどうかはわかりませんが、私の場合、divのサイズ変更が機能している間にグラフを更新できると思います：-

例えば：-

$('#my_div').bind('resize', function(){

            for (var i = 0; i < nv.graphs.length; i++) {
                nv.graphs[i].update();
            }

});
1
squiroid

Jqueryサイズ変更イベントハンドラーを追加できます。jqueryを使用していない場合は、angular onlyを使用してイベントハンドラーをアタッチできます。

jQueryの使用

$(document).on('resize', function() {

  for (var i = 0; i < nv.graphs.length; i++) {
    nv.graphs[i].update();
  }

});

使用Angular Only

ここ は、angularを使用してイベントdoドキュメントを添付する方法を示す例です。

0
Laxmikant Dange