如何将 Flot 与 AngularJS 集成？答案

【问题标题】：How to Integrate Flot with AngularJS?如何将 Flot 与 AngularJS 集成？
【发布时间】：2012-10-17 16:58:50
【问题描述】：

我是 Angular 和 Flot 的新手，但对 Jquery 和 Javascript 很熟悉。我对如何将 Flot 图表绑定到 Angular 数据模型有点困惑，因为 Flot 是一个 JQuery 插件。我四处搜索，但找不到示例。

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

【问题讨论】：

【解决方案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也可以是属性。

【讨论】：

这非常有用。我必须了解更多关于 Angular 的 API 的知识，才能让它在两个单独的 js 文件中工作（以保持指令和控制器分开）。我发现了一个问题，即如果您观看“数据”，则您已将指令与模型名称相关联。更好的解决方案是使用'scope.$watch(attrs.ngModel',....)。我在这里更新了小提琴：jsfiddle.net/TDwGF/3
对于新的 Angular 用户：要将此指令用作属性，您需要将“restrict:'E'”行更改为“restrict:'EA'”。 E 是“元素”，A 是“属性”。
我建议在第一个小提琴中使用 var data = scope.$eval(attrs.ngModel) 因为那样你的 ng-model 可以是“charts.exchangerates.eur2usd”。在第二个小提琴中，我将使用深度观察来查看数据对象内部的变化。这是由于 github 中的 MIME-Change 而没有损坏的小提琴：jsfiddle.net/dWDDp
不起作用的示例我用 cdn 链接而不是 github 用户内容更新了它们。
您好，请看我的问题stackoverflow.com/questions/37256487/…

【解决方案2】：

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

【讨论】：