charts - 如何将 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也可以是一个属性。

Answer 2

要将 jQuery 插件与 angularJS 一起使用，您必须将它们包装在指令中，您可以通过阅读 angularUI 指令的源代码找到一些 jQuery 插件指令的示例：https ://github.com/angular-ui/angular-ui/tree /主/模块/指令