[解決済み] FlotとAngularJSを連携させるには？

質問

私はAngularとFlotは初めてですが、JqueryとJavascriptは経験済みです。FlotはJQueryのプラグインなので、FlotのチャートをAngularのデータモデルにバインドする方法について、少し混乱しています。FlotはJQueryのプラグインなので、FlotのチャートをAngularのデータモデルにバインドする方法について少し混乱しています。

また、highchartsやgoogle-charts、その他のチャート作成ソリューションが使えると嬉しいです。

どのように解決するのですか？

チャート作成には重いDOM操作が伴うので、ディレクティブが有効です。

データをControllerに保持することができる

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

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

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

ディレクティブでコンパイルすることができます。

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 属性も可能です。