如何集成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？

回答

相关问题