19

表示しているタブに応じて一度に 1 つずつ表示される多くのグラフを含むページを作成しています。

最初にアクティブなタブのグラフが正しくレンダリングされます。ただし、別のタブをクリックすると、グラフが正しく表示されません。

おそらくこれは、非表示フィールドが表示されるまでディメンションを持たないためです。実際、ウィンドウのサイズを変更すると、チャートは比率を修正し、使用可能な幅を埋めるようにレンダリングします。

css を使用してグラフのサイズを明示的に定義することでこの問題を解決できますが、これではグラ​​フの応答性が損なわれます。

ウィンドウのサイズが変更されたときにアクティブになる同じ NVD3 イベントをトリガーする方法を誰か教えてもらえますか? そうすれば、それを新しいタブの選択にバインドでき、うまくいけばレンダリングの問題を解決できます。

4

7 に答える 7

16

I had the same issue (charts on multiple tabs), and this is the only thing that I could get to work.

$(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        window.dispatchEvent(new Event('resize'));
    });
});

I have a feeling, however, that all of the charts are being re-rendered, regardless of whether they are on the active tab (visible) or in the non-selected tabs (hidden).

Does anyone know how to ensure ONLY the active chart gets resized / redrawn?

于 2015-03-22T04:15:43.960 に答える
8

この JavaScript を追加するだけです。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  window.dispatchEvent(new Event('resize'));
})

hidden.bs.tabBootstrapのドキュメントに従って、新しいタブが表示された後に発生するイベントです。このコードは、タブが変更されるたびにサイズ変更イベントを発生させます。

于 2015-04-02T05:11:31.877 に答える
4

私は同じ問題に直面していました。ng-showを使用して div hidden を作成していました。ng-show をng-ifに置き換えたら、予想される動作で描画されたグラフを確認できます。説明：

  1. ng-show またはng-hideを使用して div を非表示にすると、表示プロパティのみが変更されますが、div は dom になります。

  2. ng-if divを使用すると、dom から削除され、再び dom に追加されるため、内部的に nvd3 グラフでも再描画操作が実行されます。したがって、つぶれたグラフではなく、正しいグラフが表示されます。

于 2016-07-19T07:21:20.770 に答える