如何将 Flot 与 AngularJS 集成？

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

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

由于图表涉及大量 DOM 操作，因此指令是最佳选择。

数据可以保存在控制器中

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

您还可以创建自定义 HTML 标签1 http://jsfiddle.net/Trufa/ksdqhqb2/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();
        }
    };
});

示例在这里 http://jsfiddle.net/Trufa/ksdqhqb2/1/.

对于大多数修改 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 来实现我们想要的目的。

这里是完整的例子 http://jsfiddle.net/Trufa/h2szst34/1/

1 http://jsfiddle.net/Trufa/ksdqhqb2/1/也可以是一个属性。