NVD3图表在隐藏选项卡中未正确渲染

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

"最初活动"选项卡中的图表正确呈现。但是，当我单击另一个选项卡时，图表未正确呈现。

大概这是因为隐藏的字段没有尺寸，直到可见为止。实际上，如果我调整窗口大小，图表将校正其比例并渲染，以使其填充可用的宽度。

我可以通过CSS明确定义图表大小来解决此问题，但这打败了图表的响应方面。

谁能告诉我如何触发相同的NVD3事件，该事件在窗口大小时会激活？这样，我可以将其绑定到选择新选项卡的选择，并希望纠正渲染问题。

i遇到了相同的问题（多个选项卡上的图表），这是我唯一可以工作的东西。

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

我有一种感觉，无论它们是在"活动"选项卡（可见）还是在未选择的选项卡（隐藏）中，所有图表都将重新渲染。

有人知道如何确保仅活动图表进行调整大小/重新尺寸？

我想出了如何触发所需的调整大小事件。在我的情况下，选项卡由Bootstrap驱动。因此，我简单地修改了Bootstrap Show Tab事件，以触发页面大小事件。有点间接，但完成工作：

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

只需添加此javaScript：

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

hidden.bs.tab是根据Bootstrap文档显示新选项卡后发射后发射的事件。每个标签更改后，此代码将启动调整大小事件。

新答案的原因

香草JavaScript对于 2018 中的许多人都是必要的。作为当今存在的许多框架和JavaScript库，JQuery的运行效果不佳。曾几何时，用jQuery解决方案回答所有JavaScript问题是可以接受的，但不再可行。

问题

加载c3.js或d3.js图形时，如果在页面加载过程中观看口不在站点中，则图形不能正确呈现。

示例

如果输入URL，则打开一个新选项卡，然后在加载页面后返回。
如果刷新包含图形的页面，则将浏览器最小化并在加载页面后将其打开。
如果您刷新或使用图形转到页面，请滑动到计算机上的新窗口。然后加载后返回页面。

在所有这些情况下，您的c3.js/d3.js图都无法正确呈现。通常，您会看到一个空白的画布。因此，如果您期望的是条形图，您会看到一个帆布，而不会绘制条形图。

背景

尽管我已经看到这个问题回答了，但我需要一个答案，该答案不是使用jQuery。现在，我们已经到达了一切的日子，无法用jQuery来修复我似乎很适合为这个问题提供香草JavaScript的答案。

我的团队面临着一个问题，即如果您刷新页面并刷掉或最小化，则C3.JS/D3.js图将不会加载。基本上，如果您不留在页面上并将其保存在现场之前，直到加载完成，您将不会看到图形，直到您再次调整页面。我知道这是一个使用C3.JS/D3.js的每个人都发生的问题，但我们专门使用Salesforce中的闪电。

答案

我们的修复程序是将其添加到初始化图表的控制器函数中。任何人都可以在他们编写的任何功能中使用此功能来初始化其C3.JS/D3.js图形，而不论其堆栈如何。这不是Salesforce的依赖性，但是如果您在Salesforce中遇到此问题，则确实有效。

document.addEventListener('visibilitychange', () => {
   console.log(document.visibilityState);
   window.dispatchEvent(new Event('resize'));
});

我面临同一问题。我正在使用 ng-show 使Div隐藏。一旦我用 ng-if-if 替换NG-Show>，我就可以看到在预期行为中绘制的图。说明：

当我们使用ng-show或 ng-hide 使div隐藏时，只会更改 display属性>
当我们使用 ng-if DIV从DOM中删除并再次添加到DOM上时，它也会在内部执行REDRAW操作。因此，我们看到正确的图而不是挤压。

通常触发重新绘制的事件是窗口resize事件 - NVD3对此不使用自定义事件。不过，您可以自己控制这个；通常的定义是

nv.utils.windowResize(function() { d3.select('#chart svg').call(chart); });

（其中" #chart"是包含图形的元素）。没有什么可以阻止您在另一个事件上触发代码，甚至只是在更改选项卡时明确运行Redraw代码。

更有效的方法是使用Chart.update（）方法

var chart_x = nv.models.somechart()
var chart_y = nv.models.somechart()

.....显示图表

jQuery('#myTab a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
    if(jQuery(this)...something === '..x..')
      chart_x.update(); //CALL THE UPDATE
    else ...

}）

相关内容

最新更新

热门标签：