Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了图表 – 如何集成Flot与AngularJS?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新的Angular和Flot,但有经验的Jquery和Javascript。我有点困惑,如何去绑定一个Flot图表到Angular数据模型,因为Flot是一个JQuery插件。我已经搜索过,但没有能够找到一个例子。

我也很乐意使用Highcharts,Google图表或任何其他图表解决方案。

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

数据可以保存在控制器中

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

可以创建自定义HTML tag1,指定要从中获取数据的模型

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

这个角可以通过指令编译

@H_801_9@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服务获取数据,并自动更新视图。这可以通过修改指令定义对象中的链接函数来实现

@H_801_9@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在指令中的用法来实现我们想要的。

Here the full example

1也可以是属性

大佬总结

以上是大佬教程为你收集整理的图表 – 如何集成Flot与AngularJS?全部内容,希望文章能够帮你解决图表 – 如何集成Flot与AngularJS?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。