web-dev-qa-db-ja.com

FlotとAngularJSを統合する方法は？

私はAngularとFlotが初めてですが、JqueryとJavascriptの経験があります。FlotチャートをAngularにバインドする方法について少し混乱しています。 FlotはJQueryプラグインであるため、データモデルです。私は検索しましたが、例を見つけることができませんでした。

また、ハイチャート、グーグルチャート、またはその他のチャート作成ソリューションを使用することもできます。

chartshighchartsangularjsflot
37
JBCP

チャート作成は大量のDOM操作を伴うため、ディレクティブを使用する方法があります。

データはコントローラーに保存できます

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

また、カスタムHTMLタグを作成できます 1 データを取得するモデルを指定します

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

which angularはディレクティブを介してコンパイルできます

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 属性にすることもできます。

67
jaime

AngleJSでjQueryプラグインを使用するには、ディレクティブでそれらをラップする必要があります。angularUIディレクティブのソースコードを読むことで、jQueryプラグインディレクティブの例を見つけることができます。 https://github.com/angular-ui/angular -ui/tree/master/modules/directives

1
Guillaume86