Angularjs 在内部创建多个画布图表<；部门>；带ng重复

我试图在一个div中创建多个CanvasJS图表

div需要来自控制器的数据数组，在其中循环（使用ng repeat）并在各种控件中显示数据

现在，当我尝试将CanvasJS图表放在这个div中时，图表不会呈现，我看到的错误是“未找到id为的图表”

但在这个部门之外，同样的图表运行良好

此处的示例代码：

APP.JS

var m = {
  "India": "2",
  "Australia": "3"
};

function MyCtrl($scope) {
  $scope.items = m;
}
var dps = [{
  x: 1,
  y: 10
}]; //dataPoints. 

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Live Data"
  },
  axisX: {
    title: "Axis X Title"
  },
  axisY: {
    title: "Units"
  },
  data: [{
    type: "line",
    dataPoints: dps
  }]
});

chart.render();
var xVal = dps.length - 1;
var yVal = 15;
var updateInterval = 1000;

var updateChart = function() {
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
  dps.push({
    x: xVal,
    y: yVal
  });
  xVal--;
  chart.render();

};
setInterval(function() {
  updateChart()
}, updateInterval);

HTML:

匹配摘要：
{country}}：{goals}}

试图搜索类似的问题，但没有运气

---

提前感谢您的时间和帮助。

应注意程序流程。它抛出错误“找不到ID为的图表”，因为试图在尚不存在的div元素上呈现图表。 另外，不同div元素的id应该不同。 您可以使用类似于此的代码来追加动态id

<div ng-repeat="(country,goals) in items"> 
    <div id="chartContainer-{{country}}" style="height: 200px; width: 100%;"></div>
<h2>{{country}}: {{goals}} </h2>
</div>

{{国家}：{{目标}

---

以下是工作流程

应注意程序流程。它抛出错误“找不到ID为的图表”，因为试图在尚不存在的div元素上呈现图表。 另外，不同div元素的id应该不同。 您可以使用类似于此的代码来追加动态id

<div ng-repeat="(country,goals) in items"> 
    <div id="chartContainer-{{country}}" style="height: 200px; width: 100%;"></div>
<h2>{{country}}: {{goals}} </h2>
</div>

{{国家}：{{目标}

---

这是工作报告

谢谢@Rishabh。在实际场景中，使用$http.get在控制器中填充数据，在视图中使用相同的值：

现在在我的控制器中，尽管我已经解决了“承诺”，但当DOM达到这一点时，vm.users中没有任何内容，它无法创建div并给出相同的错误“找不到ID为的图表”。希望您能给予指导。谢谢。也许这也是程序流程的问题。流的处理方式应确保在尝试创建div元素之前填充控制器数据，处理完毕后，应呈现图表。另外，这里有一个链接解释CanvasJS与AngularJS的集成：。希望能有所帮助。感谢@Rishabh的指导和回答我的问题。你的第一个答案解决了原来的问题。第二个问题，我问，是关于程序的流程，在修复它之后，图表中的一切都很好。干杯，希望能帮上忙，迪帕克。谢谢@Rishabh。在实际场景中，使用$http.get在控制器中填充数据，在视图中使用相同的值：

现在在我的控制器中，尽管我已经解决了“承诺”，但当DOM达到这一点时，vm.users中没有任何内容，它无法创建div并给出相同的错误“找不到ID为的图表”。希望您能给予指导。谢谢。也许这也是程序流程的问题。流的处理方式应确保在尝试创建div元素之前填充控制器数据，处理完毕后，应呈现图表。另外，这里有一个链接解释CanvasJS与AngularJS的集成：。希望能有所帮助。感谢@Rishabh的指导和回答我的问题。你的第一个答案解决了原来的问题。第二个问题，我问，是关于程序的流程，在修复它之后，图表中的一切都很好。干杯，希望能帮上忙，迪帕克。