如何整合Flot和AngularJS？

我是Angular和Flot的新手，但是我对Jquery和Javascript很有经验。 我对如何将Flot图表绑定到Angular数据模型有点困惑，因为Flot是一个JQuery插件。 我已经四处搜寻，但一直没能find一个例子。

我也很乐意使用highcharts，谷歌图表，或任何其他图表解决scheme。

Answer 1

由于图表涉及繁重的DOM操作，指令是要走的路。

数据可以保存在控制器中

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

您可以创build一个自定义的HTML标签1，指定您想从中获取数据的模型

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

哪个angular度可以通过指令编译

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

这里的例子 。

对于大多数修改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的API来实现我们想要的。

这里是完整的例子

---

1也可以是一个属性。

Answer 2

要将jQuery插件与angularJS一起使用，您必须将它们包装在指令中，您可以通过阅读angularUI指令的源代码来findjQuery插件指令的一些例子： https ： //github.com/angular-ui/angular-ui/tree /主/模块/指令