如何将Flot与AngularJS集成？

Question

我是Angular和Flot的新手，但对Jquery和Javascript经验丰富。我对如何将Flot图表绑定到Angular数据模型感到有些困惑，因为Flot是一个JQuery插件。我到处搜寻，但找不到范例。

我也很乐意使用highcharts，google-charts或任何其他图表解决方案。

Answer 1

由于制图涉及大量的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();
        }
    };
});

这里的例子。

对于大多数修改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也可以是一个属性。