如何将 Flot 与 AngularJS 集成? [英] How to Integrate Flot with AngularJS?

问题描述

我是 Angular 和 Flot 的新手，但对 Jquery 和 Javascript 有经验.我对如何将 Flot 图表绑定到 Angular 数据模型有点困惑，因为 Flot 是一个 JQuery 插件.我已经四处搜索了，但没有找到一个例子.

I am new to Angular and Flot, but am experienced with Jquery and Javascript. I am a bit confused about how to go about binding a Flot chart to Angular data models, since Flot is a JQuery plugin. I've searched around, but haven't been able to find an example.

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

I would also be happy to use highcharts, google-charts, or any other charting solution.

推荐答案

由于图表涉及大量的 DOM 操作，指令是要走的路.

Since charting involves heavy DOM manipulation, directives are the way to go.

数据可以保存在控制器中

Data can be kept in the Controller

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

并且您可以创建自定义 HTML 标记1 指定您想要获取数据的模型来自

And you can create a custom HTML tag1 specifying the model you want to get data from

 <chart ng-model='data'></chart>

哪个角度可以通过指令编译

which angular can compile through a directive

App.directive('chart', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});

示例.

这个过程与大多数修改 DOM 的插件类似.

This process is similar for most plugins that modify the DOM.

-*-

此外，您可以观察图表底层数据的变化并重新绘制它，这样您就可以通过 $http 服务从控制器中获取数据并自动更新视图.这可以通过修改指令定义对象中的链接函数来实现

Also, you can watch for changes in the chart's underlying data and redraw it, so this way you can grab data through the $http service from your controller and update the view automatically. This can be achieved by modifying the linking function in the directive definition object

   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 来实现我们想要的.

Notice the usage of Flot's API within the directive to achieve what we want.

这里是完整示例

1 也可以是一个属性.

这篇关于如何将 Flot 与 AngularJS 集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！