यूआई बूटस्ट्रैप फ्लोट के साथ गलत तरीके से ticks

Question

मैं UI बूटस्ट्रैप के साथ एक कोणीय वेब-ऐप पर काम कर रहा हूं और UI टैब का उपयोग करके फ़्लोट चार्ट में वाई-टिक लेबल संरेखण के साथ समस्या में भाग गया हूं।

मानक बूटस्ट्रैप टैब के साथ

, भूखंडों के अंदर से मेल खाते हैं और tabset बाहर: http://jsfiddle.net/TDwGF/614/

हालांकि, यूआई बूटस्ट्रैप के tabset साथ, हम पाते हैं कि y-टिक लेबल साजिश के साथ ओवरलैप: http://jsfiddle.net/TDwGF/615/

फ्लोट निर्देश बनाने में विभिन्न दृष्टिकोणों के साथ खेलने में, मैं एक साजिश बना सकता हूं जहां वाई-टिक लेबल का केवल आधा गलत तरीके से ग़लत हो गया है (हालांकि, मैं इसे कम से कम उदाहरण में पुन: पेश नहीं कर पा रहा था)।

मैं किसी भी विरासत में मिला सीएसएस संशोधनों कि इन मुद्दों का कारण होगा नहीं मिल रहा है, और मैं टैब निर्देश स्रोत कोड के माध्यम से जा में किसी भी भाग्य के साथ नहीं मिले हैं।

किसी भी मदद की सराहना की जाएगी।

Answer 1

मुझे याद है कि Highcharts के साथ काम करते समय मेरे साथ कुछ ऐसा ही हुआ था।

गलत संरेखण का मूल कारण शायद ब्राउज़र गतिशील प्रतिपादन समय कैनवास/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.

---

Anternatively आप कोणीय इंजेक्षन सकता है $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.