UI Bootstrap mit Flot, der fehlausgerichtete Ticks verursacht

Question

Ich arbeite an einer Angular Web-App mit UI Bootstrap und habe ein Problem mit der Y-Tick-Etikettenausrichtung in Flot-Diagrammen unter Verwendung von UI-Registerkarten.

Mit Standard-Boot Tabs entsprechen die Grundstücke innerhalb und außerhalb des tabset: http://jsfiddle.net/TDwGF/614/

jedoch mit UI Bootstrap des tabset, finden wir, dass die y-tick-Etiketten mit dem Grundstück überlappen: http://jsfiddle.net/TDwGF/615/

Beim Spielen mit verschiedenen Ansätzen beim Erstellen der Flot-Direktive kann ich ein Diagramm erstellen, bei dem nur die Hälfte der Y-Tick-Label falsch ausgerichtet ist (ich konnte dies jedoch in einem minimalen Beispiel nicht gut reproduzieren).

Ich kann keine ererbten CSS Änderungen finden, die diese Probleme verursachen würde, und ich habe nicht mit etwas Glück in gehen durch die Registerkarten Richtlinie Quellcode erfüllt.

Jede Hilfe wäre willkommen.

Answer 1

Ich erinnere mich, dass bei der Arbeit mit Highcharts etwas ähnliches passiert war.

Die Ursache der Fehlausrichtung ist wahrscheinlich das dynamische Rendering des Browsers, das den Canvas/Svg-Containerbereich einschränkt.

---

Um diese Art von Problem zu umgehen, wickeln nur die Handlung Schöpfung mit einem Timeout, es zu machen, auf nächsten Zyklus verdauen:

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.

---

Anternatively Sie Winkel injizieren könnte $timeout, so heißt es schon scope.$apply() für Sie:

See working $timeout fiddle here.