使用 Flot with Bootstrap 3 模态，y 轴未对齐

Question

有没有人遇到过使用 bootstrap 3 模态时 y 轴未对齐的 flot？在页面上它看起来很完美：

但是当使用模式启动时，y 轴标签未对齐：

即使页面重新调整大小，它仍然是一样的。我试图改变 CSS 的行为，但仍然不能。这是一个错误吗？ 我使用的示例来自 http://demo.thedevelovers.com/dashboard/kingadmin-v1.5/charts-statistics.html

这里是fiddle：https://jsfiddle.net/k06ptyzm/2/

(code omitted)

Answer 1

问题是您在不可见的容器元素中呈现 Flot 图表。这会导致渲染错误。您可以在更新的 fiddle 中看到这一点，其中模式中的图表在 5 秒延迟后呈现：

if ($("#chart-2").length > 0) {
    setTimeout(function() {
        chartYear($("#chart-2"));
    }, 5000);
}

• 当您在呈现图表之前打开模式时，包括 y 轴在内的所有内容看起来都很好。
• 当您在图表呈现后等待并打开模式时（就像在您的原始代码中一样），轴未对齐。

所以您的问题的解决方案是仅在模式打开后呈现图表。