nvd3圖表顯示錯誤：無

我目前在我的應用程序中使用nvd3進行圖表繪製。我有一個問題，如果在圖表呈現之前div通過display:none隱藏，圖表會拋出一個錯誤，並且在「un-hiding」div時，我必須點擊圖表才能正確呈現它們。即使div被隱藏，是否可以預先渲染圖表？我曾嘗試在調用圖表之前設置父svg的寬度和高度，但無濟於事。nvd3圖表顯示錯誤：無

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; 
});

來源

2013-07-11 Wei Hao

-1

可以隱藏圖表 - 但仍然呈現圖形 - 使用一類是這樣的：

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

您應該將此到SVG的父母，你的情況#chart。當你想顯示圖表時，請刪除該課程。

來源

2013-12-05 13:22:21 Nerian

這缺乏上下文。例如，這個類應該應用到什麼元素？ – metaColin

另外它不起作用，我在SVG和父容器上都嘗試過它。 – metaColin

定義不起作用。 – Nerian

我想通了如何使以前隱藏的圖表呈現正常，而無需靜態地定義圖表區域的尺寸：

NVD3 Charts not rendering correctly in hidden tab

該解決方案還依賴於使用JS來顯示隱藏的內容並同時觸發一個調整大小事件，強制NVD3調整現在可見的圖表以填充父級。在我的情況下，我不關心搜索引擎優化，所以我用display：none;但能見度：隱藏;也可以工作。

來源

2014-02-05 16:16:45 metaColin

只需添加這個JavaScript：

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

hidden.bs.tab是一個新的標籤後，大火被顯示爲按照引導文檔事件。此代碼在每個選項卡更改後觸發resize事件。

來源

2015-04-02 05:10:55 nostromo

nvd3圖表顯示錯誤：無

回答

相關問題