图表 – 如何集成Flot与AngularJS？

数据可以保存在控制器中

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

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

<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();
        }
    });

注意Flot的API在指令中的用法来实现我们想要的。

Here the full example

1也可以是属性。