如何将Flot与AngularJS集成？

Question

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

我也很乐意使用highcharts,谷歌图表或任何其他图表解决方案.

Answer 1

由于图表涉及繁重的DOM操作,指令是可行的方法.

数据可以保存在Controller中

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

您可以创建一个自定义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也可以是属性.