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>

哪个angular可以通过指令编译

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也可以是属性。

Answer 2

要使用带有angularJS的jQuery插件，你必须将它们包装在指令中，你可以通过读取angularUI指令的源代码找到一些jQuery插件指令的例子：https://github.com/angular-ui/angular-ui/tree/master/modules/directives

如何将Flot与AngularJS集成？

2 个答案: