Charts 如何将Flot与AngularJS集成？

我不熟悉Angular和Flot，但熟悉Jquery和Javascript。我对如何将Flot图表绑定到角度数据模型有点困惑，因为Flot是一个JQuery插件。我到处找了，但没找到一个例子

---

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

要将jQuery插件与angularJS结合使用，您必须将它们封装在指令中，您可以通过阅读angularUI指令的源代码找到jQuery插件指令的一些示例：

因为图表涉及大量DOM操作，指令是前进的方向

数据可以保存在控制器中

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

您可以创建一个自定义HTML标记，指定要从中获取数据的模型

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

这个过程与大多数修改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来实现我们想要的

---

---

也可以是属性。

这是非常有用的信息。我必须学习更多关于Angular的API的知识，才能让它在两个单独的js文件中工作（使指令和控制器保持独立）。我发现了一个问题，那就是如果你看“数据”，你已经把你的指令和模型的名字联系起来了。更好的解决方案是使用“scope.$watch（attrs.ngModel）”，等等。我在这里更新了fiddle：对于新的Angular用户：要将此指令用作属性，需要将“restrict:'E'”行更改为“restrict:'EA'”。E是“元素”，A是“属性”。我建议首先使用var数据=范围.$eval（attrs.ngModel），因为这样你的ng模型可以是“charts.exchangerates.eur2usd”。在第二把小提琴中，我将使用深度观察来查看数据对象内部的变化。这里有一个没有因为github中的MIME更改而被破坏的提琴：我用cdn链接而不是github用户内容更新了它们的示例。您好，您能看到我的问题吗

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