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

Question

我正在开发一个带有UI Bootstrap的Angular Web应用程序，并且使用UI标签遇到了flot图表中y-tick标签对齐的问题。

使用标准引导选项卡，图表在tabset内部和外部匹配： http://jsfiddle.net/TDwGF/614/

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

在使用不同的方法来构建flot指令时，我可以创建一个图表，其中只有一半的y-tick标签未对齐（但是在最小的例子中我无法再现这一点）。

我找不到任何会导致这些问题的继承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.

---

或者你可以注入角度$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.