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屋！