如何集成Flot和AngularJS？

我是Angular和Flot的新手，但我很熟悉Jquery和Javascript。我對如何將Flot圖表綁定到Angular數據模型有點困惑，因爲Flot是一個JQuery插件。我搜索了四周，但一直未能找到一個例子。如何集成Flot和AngularJS？

我也很樂意使用highcharts，google-charts或任何其他製圖解決方案。

來源

2012-10-27 JBCP

由於圖表涉及重DOM操作，指令是要走的路。

數據可以保存在控制器

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

而且你可以創建自定義HTML標籤1通過指令指定要由

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

獲取數據，角度可以編譯模型

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(); 
     } 
    });

通知的指令中海軍報的API的使用情況，以達到我們想要的東西來實現。

Here the full example

1可以是一個屬性了。

來源

2012-10-27 21:52:45 jaime

這是非常翔實的。我必須學習更多關於Angular API的知識，讓它能夠跨越兩個獨立的js文件（保持指令和控制器分離）。我發現了一個問題，那就是如果你看'數據'，你已經把你的指令和模型的名字聯繫起來了。更好的解決方案是使用'scope。$ watch（attrs.ngModel'，....）。我在這裏更新了小提琴：http://jsfiddle.net/TDwGF/3/ – JBCP

對於新的Angular用戶：要將此指令用作屬性，您需要將「restrict：'E'」行更改爲「限制：'EA'「。 E是'元素'，A是'屬性'。 – JBCP

我建議在第一個小提琴中使用var data = scope。$ eval（attrs.ngModel），因爲那麼你的ng模型可以是「charts.exchangerates.eur2usd」。在第二個小提琴中，我將使用深入觀察來查看數據對象內部的更改。這裏是一個不會因爲github中的MIME更改而損壞的小提琴：http://jsfiddle.net/dWDDp/ – maklemenz

使用jQuery插件與angularJS，你要包起來的指令，你可以通過閱讀angularUI指令的源代碼中找到jQuery插件指令的一些exemples：

來源

2012-10-27 20:50:20 Guillaume86

如何集成Flot和AngularJS？

回答

相關問題