带有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);
        }
    };
});

请参阅此处的工作setTimeout小提琴。

或者，您可以注入 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);
        }
    };
}]);

请参阅此处的工作$timeout小提琴。