javascript - 带有 Flot 的 UI Bootstrap 导致未对齐的刻度

Question

我正在使用 UI Bootstrap 开发 Angular 网络应用程序，但在使用 UI 选项卡的 float 图表中遇到了 y 刻度标签对齐问题。

使用标准的 bootstrap 选项卡，图表在选项卡集内外匹配: http://jsfiddle.net/TDwGF/614/

但是，使用 UI Bootstrap 的 tabset，我们发现 y 刻度标签与绘图重叠: http://jsfiddle.net/TDwGF/615/

在尝试构建 flot 指令的不同方法时，我可以创建一个图，其中只有一半的 y 刻度标签未对齐(但是，我无法在最小的示例中很好地重现这一点)。

我找不到任何会导致这些问题的继承 css 修改，而且我在浏览 tabs 指令源代码时也没有遇到任何运气。

如有任何帮助，我们将不胜感激。

Answer 1

我记得我在使用 Highcharts 时已经发生过类似的事情.

错位的根本原因可能是浏览器动态渲染时间限制了canvas/svg容器空间。

---

要解决此类问题，只需使用超时包装绘图创建以在下一个摘要周期呈现它:

App.directive('chart', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            setTimeout(function(){
                $.plot(elem, data, {});
                scope.$apply();
            }, 0);
        }
    };
});

See working setTimeout fiddle here.

---

或者，您可以注入(inject) Angular $timeout，因此它已经为您调用了 scope.$apply():

App.directive('chart', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $timeout(function() {
                $.plot(elem, data, {});
            }, 0);
        }
    };
}]);

See working $timeout fiddle here.