AngularJS के साथ फ़्लोट को एकीकृत करने के लिए कैसे?

Question

मैं कोणीय और फ्लोट के लिए नया हूं, लेकिन मुझे jquery और जावास्क्रिप्ट के साथ अनुभव हुआ है। फ्लोर एक JQuery प्लगइन है, क्योंकि मैं कोणीय डेटा मॉडल में फ़्लोट चार्ट को बाध्य करने के बारे में थोड़ा उलझन में हूं। मैंने चारों ओर खोज की है, लेकिन एक उदाहरण खोजने में सक्षम नहीं है।

मुझे हाईचार्ट्स, google-charts, या किसी अन्य चार्टिंग समाधान का उपयोग करने में भी खुशी होगी।

Answer 1

, निर्देशों जाने का रास्ता है।

डाटा नियंत्रक

App.controller('Ctrl', function($scope) { 
    $scope.data = [[[0, 1], [1, 5], [2, 2]]]; 
}); 

में रखा जा सकता और अगर आप एक निर्देश के माध्यम से मॉडल आप जो कोणीय संकलन कर सकते हैं से

<chart ng-model='data'></chart> 

डेटा प्राप्त करना चाहते निर्दिष्ट करने एक कस्टम HTML टैग 1 बना सकते हैं

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

Example here।

यह प्रक्रिया अधिकांश प्लगइन के लिए समान है जो DOM को संशोधित करती हैं।

- * -

इसके अलावा, आप चार्ट के अंतर्निहित डेटा में परिवर्तन के लिए देख सकते हैं और यह पुनः बनाने सकता है, इसलिए इस तरह से आप अपने नियंत्रक से $ http सेवा के माध्यम से डेटा हड़पने और स्वचालित रूप से दृश्य को अपडेट कर सकते हैं। यह निर्देश परिभाषा वस्तु में जोड़ने समारोह को संशोधित करने

var chart = null, 
     opts = { }; 

    scope.$watch(attrs.ngModel, function(v){ 
     if(!chart){ 
      chart = $.plot(elem, v , opts); 
      elem.show(); 
     }else{ 
      chart.setData(v); 
      chart.setupGrid(); 
      chart.draw(); 
     } 
    }); 

सूचना प्राप्त करने के लिए निर्देश के भीतर Flot के एपीआई का उपयोग हम क्या चाहते हैं के द्वारा प्राप्त किया जा सकता है।

Here the full example

---

1 एक विशेषता भी हो सकता है।

Answer 2

AngularJS साथ jQuery प्लगइन का उपयोग करने के लिए, आप आप angularUI निर्देशों के स्रोत कोड को पढ़ कर jQuery प्लगइन्स निर्देशों के कुछ exemples पा सकते हैं उन्हें निर्देशों में रैप करने के लिए है, चूंकि चार्टिंग भारी डोम हेरफेर शामिल https://github.com/angular-ui/angular-ui/tree/master/modules/directives