使用 ng-repeat 在 <div> 内创建多个 CanvasJS 图表

Question

我正在尝试在 div.

中创建多个 CanvasJS 图表

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

现在，当我尝试将 CanvasJS 图表放入此 div 时，图表不会呈现，我看到的错误是 'chart with id is not found'

但同一张图表在 div 之外效果很好。

示例代码在这里： http://jsfiddle.net/DTheWebDev/mozfsxpc/7/

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:

<h3>Match Summary:</h3>

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

尝试搜索类似问题，但没有成功。

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

Answer 1

程序的流程要注意。它抛出错误 'Chart with ID is not found'，因为图表试图在尚不存在的 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>

这是工作jsfiddle

使用 ng-repeat 在 <div> 内创建多个 CanvasJS 图表

Creating multiple CanvasJS charts inside <div> with ng-repeat

html

angularjs

angularjs-ng-repeat

canvasjs