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

我有一个数据集，它由多天的数据组成。每天将用一行表示。应该使用Flot.js将其放入图形中，并通过Angularjs加载数据。在$（document）.ready上，没有数据存在，因为随后通过HTTP从服务器加载数据。因为我不想把所有90天（相当于90行）都放在一个图表中，所以我需要将它们分割成单独的图表。 我在各种教程中看到了如何使用Angular中的指令来实现DOM操作。但是，这需要（据我所知）页面上已经存在原始DOM元素（如本教程中的： ) 实际上，这很好地解释了指令的功能，但仅在您有一个数据集的情况下。由于我需要分割为多个图形设置的数据，如何将它们放在不同的图形中，这些图形在页面创建时不存在

非常感谢你的帮助

这里有非常基本的angular+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 } });
});

---

这就是我如何在数据数组上创建图形的原因。 关键是结合使用指令和ng repeat。

不幸的是，它没有在plunker上显示图形结果，但在我的机器上显示相同的代码。

---

谢谢

您是对的，$（文档）。ready当然会在加载数据之前启动，您需要使用$http.get和'Then'回调作为处理数据的位置感谢您的回复。我想有些事情还不清楚：我知道，在我的例子中，如何使用$http.post获取数据，如果静态定义了html元素，它工作得很好。但是如果我不知道我的结果将有多少子集（因此需要多少html元素），我就无法在html文件中创建它们。这就是我的问题所在，因为我没有找到一种方法来动态创建HTML元素，并在检索到的数据上使用Flot.js逻辑。您的plunkr不起作用，因为请求url应该是“api/data.json”，而不是“/api/data.json”！你是对的，我已经调整了样品，以便其他人也可以使用它。它现在正在按预期工作。

<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>