如何使用Flot和Angular添加多个图形？

我有一个数据集，它包含多天的数据。每天将用一行代表。这应该使用Flot.js放入图表中，并通过Angularjs加载数据。在$（document）.ready中，没有数据存在，因为它之后通过HTTP从服务器加载。由于我不想将所有90天（等于90行）放到一张图中，我需要将它们分成单独的图。我在各种教程中看到如何使用Angular中的指令来实现DOM操作。但是，这需要（根据我的理解）原始DOM元素已经存在于页面上（例如本教程中： How to Integrate Flot with AngularJS?）实际上，这很好地解释了指令的功能，但只有在您有一个数据组。由于我需要将设置的数据拆分为多个图表，我怎样才能将它们放入不同的图表中，这些图表在创建页面时不存在？如何使用Flot和Angular添加多个图形？

非常感谢您的帮助！

来源

2017-03-24 Stefan

您没错，$（document）.ready当然会在数据加载之前触发，您需要使用$ http.get和'Then'回调作为处理数据的地方 – happyZZR1400

感谢您的回复。我认为有些事情还不清楚：我知道，如果我使用$ http.post获取数据，并且工作正常，如果我有静态定义的html元素。但是如果我不知道，我的结果会有多少子集（因此需要多少html元素），我无法在html文件中创建它们。这就是我的问题所在，因为我没有找到一种方法来动态创建HTML元素，并在检索到的数据上对它们使用Flot.js逻辑。 – Stefan

这里plunker非常基本的角度+海军报实现

$http.get('api/data.json').then(res=>{ 
    $scope.name = res.data[0].label; 
    let num =res.data[0].data[0][1]; 
    $.plot($("#placeholder"), [ [[0, 0], [1, num]] ], { yaxis: { max: 1 } }); 
});

来源

2017-03-24 08:22:02 happyZZR1400

这是plunker我怎么能数据的阵列上创建的图表。关键是要使用指令和ng-repeat的组合。 https://plnkr.co/edit/IUvJriqbyB792R1oyhxJ?p=preview

<div ng-controller="Ctrl"> 
     <div ng-repeat="result in results"> 
      <section> 
      <chart ng-model="result" style="display:inline-block;width:400px;height:200px"> 

      </chart> 
      </section> 
     </div> 
    </div>

遗憾的是它并不显示在plunker的图形效果，但相同的代码做我的机器上。谢谢！

来源

2017-03-24 10:48:38 Stefan

你plunkr不工作，因为请求url应该是“api/data.json”而不是'/api/data.json – happyZZR1400

非常感谢！你是对的，我已经调整了样本，以便其他人也可以使用它。它现在按预期工作。 – Stefan

如何使用Flot和Angular添加多个图形？

回答

相关问题