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

Question

是否有人使用bootstrap 3模式遇到y轴错误对齐的这个flot？在页面上，它看起来很完美：

但是当使用模态启动时，y轴标签错位：

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

中的示例

这是小提琴：https://jsfiddle.net/k06ptyzm/2/

(code omitted)

Answer 1

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

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

• 在渲染图表之前打开模态时，所有内容看起来都很好，包括y轴。
• 等待并在渲染图表后打开模态（如原始代码中），轴未对齐。

因此，问题的解决方案是仅在模态打开后才渲染图表。