NVD3 图表无法在隐藏选项卡中正确呈现 [英] NVD3 Charts not rendering correctly in hidden tab

问题描述

我正在构建一个包含许多图表的页面，这些图表一次显示一个，具体取决于您正在查看的选项卡.

I am building a page which contains many charts, which are displayed one at a time depending on which tab you are looking at.

初始活动选项卡中的图表呈现正确.但是，当我单击另一个选项卡时，图表无法正确呈现.

The chart in the initially active tab renders correctly. However when I click to another tab, the chart is not rendered properly.

大概这是因为隐藏字段在使其可见之前没有尺寸.事实上，如果我调整窗口大小，图表将更正它的比例，并进行渲染以填充可用宽度.

Presumably this is because the hidden field does not have dimensions until it is made visible. In fact if I resize the window the chart will correct it's proportions, and render so that it fills the available width.

我可以通过 css 显式定义图表大小来解决这个问题，但这会破坏图表的响应性.

I can fix this problem by explicitly defining the chart size via css, but this defeats the responsive aspect of the charts.

谁能告诉我如何触发在窗口调整大小时激活的相同 NVD3 事件?这样我就可以将它绑定到新选项卡的选择上，并有望解决渲染问题.

Can anyone tell me how to trigger the same NVD3 event which gets activated when the window resizes? That way I can bind it to the selection of a new tab, and hopefully remedy the rendering issue.

推荐答案

我想出了如何触发我需要的调整大小事件.在我的情况下，选项卡是由引导程序驱动的.所以我简单地修改了我的引导程序显示选项卡事件来触发页面调整大小事件.这有点间接，但它完成了工作:

I figured out how to trigger the resize event I needed. In my case the tabs are driven by bootstrap. So I simply modified my bootstrap show tab event to trigger a page resize event as well. It's a little indirect, but it gets the job done:

jQuery('#myTab a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
    jQuery(window).trigger('resize'); // Added this line to force NVD3 to redraw the chart
})

这篇关于NVD3 图表无法在隐藏选项卡中正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！