4

現在、アプリケーションのチャート作成に nvd3 を使用しています。チャートがレンダリングされる前にdivが非表示display:noneになっていると、チャートがエラーをスローし、divを「非表示にしない」ときにチャートをクリックして正しくレンダリングする必要があるという問題があります。div が非表示になっている場合でも、グラフを事前にレンダリングする方法はありますか? グラフを呼び出す前に、親 svg の幅と高さを設定しようとしましたが、役に立ちませんでした。

nv.addGraph(function () {
    //chart setup code

    d3.select("#chart svg").attr("width", 300).attr("height", 500);
    d3.select("#chart svg").datum(data).transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});
4

3 に答える 3

2

グラフ領域の寸法を静的に定義する必要なく、以前は非表示だったグラフを適切にレンダリングする方法を見つけました。

非表示のタブで NVD3 チャートが正しくレンダリングされない

このソリューションは、JS を使用して非表示のコンテンツを表示し、同時に NVD3 に現在表示されているチャートのサイズを変更して親を埋めるサイズ変更イベントをトリガーすることにも依存しています。私の場合、SEO は気にしなかったので、display:none; を使用しました。しかし、可視性：非表示。もうまくいくでしょう。

于 2014-02-05T16:16:45.123 に答える
0

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

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

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

于 2015-04-02T05:10:55.530 に答える
-1

次のようなクラスを使用して、チャートを非表示にすることができますが、グラフは引き続きレンダリングできます。

.out-of-sight-and-space{
  visibility: hidden !important;
  position: absolute !important;
  top: 0 !important;
}

#chart の場合、これを svg の親に適用する必要があります。チャートを表示したい場合は、クラスを削除してください。

于 2013-12-05T13:22:21.557 に答える