如何用AngularJS整合FLOT? [英] How to Integrate Flot with AngularJS?
问题描述
我新的角度和海军报,但我用jQuery和Javascript经验。我有点困惑如何去绑定FLOT图表角的数据模型,因为FLOT是一个jQuery插件。我四处搜寻,但一直没能找到一个例子。
I am new to Angular and Flot, but am experienced with Jquery and Javascript. I am a bit confused about how to go about binding a Flot chart to Angular data models, since Flot is a JQuery plugin. I've searched around, but haven't been able to find an example.
我也很乐意使用highcharts,谷歌图表,或其他任何图表的解决方案。
I would also be happy to use highcharts, google-charts, or any other charting solution.
推荐答案
由于图表涉及重DOM操作,指令是要走的路。
Since charting involves heavy DOM manipulation, directives are the way to go.
的数据可以保存在控制器
Data can be kept in the Controller
App.controller('Ctrl', function($scope) {
$scope.data = [[[0, 1], [1, 5], [2, 2]]];
});
你还可以从
<chart ng-model='data'></chart>
这角度可通过指令编译
which angular can compile through a directive
App.directive('chart', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngModel];
$.plot(elem, data, {});
elem.show();
}
};
});
例这里。
这过程是修改DOM的大部分插件相似。
This process is similar for most plugins that modify the DOM.
- * -
-*-
此外,您还可以观看在图表的底层数据的变化和重绘,所以这种方式可以通过从控制器$ http服务获取数据,并自动更新视图。这可以通过在指令中定义对象修改链接功能来实现
Also, you can watch for changes in the chart's underlying data and redraw it, so this way you can grab data through the $http service from your controller and update the view automatically. This can be achieved by modifying the linking function in the directive definition object
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的使用来实现我们想要的。
Notice the usage of Flot's API within the directive to achieve what we want.
1 可以是一个属性了。
这篇关于如何用AngularJS整合FLOT?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!