显示时出现nvd3图表错误:无

Question

我目前正在使用nvd3在我的应用程序中绘制图表。我有一个问题，如果在呈现图表之前通过display:none隐藏了div，图表将抛出一个错误，并且在“取消隐藏”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;
});

Answer 1

我想出了如何让以前隐藏的图表正确呈现，而不需要静态地定义图表区域的尺寸：

NVD3 Charts not rendering correctly in hidden tab

此解决方案还依赖于使用JS显示隐藏内容，同时触发resize事件，该事件强制NVD3调整现在可见的图表的大小以填充父图表。在我的例子中，我并不关心搜索引擎优化，所以我使用了display:none；但visibility:hidden；也可以。

Answer 2

只需添加此JavaScript：

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

hidden.bs.tab是在根据引导程序文档显示新选项卡后触发的事件。此代码在每次选项卡更改后激发一个调整大小事件。

Answer 3

您可以使用如下所示的类来隐藏图表，但仍然可以呈现图表：

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

您应该将此应用于svg的父对象，在本例中为#chart。当您想要显示图表时，请删除该类。