随笔- 1793 文章- 1 评论- 61 阅读- 298万

Intergate flot with Angular js ——Angular 图形报表

下面这篇文章最终的结论就是 Flot 插件结合 Angular 的Directive 来处理图表的绘制

给出github上的一个demo源码。https://gist.github.com/flyysr/ba3a51cdbfcae7f53dec

最近项目中遇到了要显示图形报表的问题，项目的前端架构主要是基于 AngularJs 的，故，找js插件来显示图表（chart）.

找到了Flot (http://www.flotcharts.org/), 说明一下，Flot是一个绘制图表的Js库。

下面问题的关键是怎么将 Flot和 Angular 整合起来。

----------------------------------------------------

显然，绘制图表涉及到大量的 DOM操作，而Angular的 Directive是有关html自定义标签的，所以这里的整合主要的用到 Angular的Directive的知识。

下面是我在StackOverflow上搜到的类似的提问：

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.

I would also be happy to use highcharts, google-charts（这几个也是js绘制图表的插件）, or any other charting solution.

下面的是 stackOverflow上的最佳答案，这里记录之。

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

2、Data can be kept in the controller

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

　And you create custom html tag (Can be an attribute too) specifying the model you want to get data from.

1	`<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();
        }
    };
});

Example here　　

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

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();
        }
    });