Question

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

非常感谢你的帮助！

Answer 1

此处plunker具有非常基本的角度+ flot实现

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

Answer 2

这是我能够在数据数组上创建图形的插件。关键是使用指令和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上显示图形结果，但是我的机器上的代码相同。谢谢！

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

2 个答案: