37

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

また、highcharts、google-charts、またはその他のグラフ作成ソリューションを使用できれば幸いです。

4

2 に答える 2

67

グラフ作成には大量の 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();
        }
    };
});

例はこちら。

このプロセスは、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属性にすることもできます。

于 2012-10-27T21:52:45.330 に答える
1

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

于 2012-10-27T20:50:20.550 に答える