Chartjs和ng-repeat

Question

我尝试绘制图像

情况1：

<div ng-repeat="result in results track by $index">
  <div id="chartSD{{$index}}"
    class="col-12 column-with-left-padding column-with-right-padding"
    style="height: 500px">
    <div class="divider-40"></div>
    <canvas id="chartSDG0"></canvas>
  </div>
</div>

在js中：

var obj = document.getElementById("chartSDG0");
console.log(obj)   // =>      <canvas id="chartSDG0">
var BALANCE_SHEET_chart = new Chart(obj, {

这行得通！

---

情况2：

<div ng-repeat="result in results track by $index">
  <div id="chartSD{{$index}}"
    class="col-12 column-with-left-padding column-with-right-padding"
    style="height: 500px">
    <div class="divider-40"></div>
    <canvas id="chartSDG{{$index}}" ng-attr-id="{{'chartSDG' + $index}}"></canvas>
  </div>
</div>

在js中：

var obj = document.getElementById("chartSDG0");
console.log(obj)   // =>      null
var BALANCE_SHEET_chart = new Chart(obj , { // => error in this line because obj  is null 

不起作用！在第二种情况下，我在obj中得到null，并且出现此错误：

Error: t is null
acquireContext@http://localhost:8080/xxx/assets   /chart.bundle.min.js?compile=false:10:173954
construct@
http://localhost:8080/xxx/assets/chart.bundle.min.js?compile=false:10:105079
t@
http://localhost:8080/xxx/assets/chart.bundle.min.js?compile=false:10:129391

Answer 1

您可以尝试类似的方法。

LinkedHashSet

如果您的json中有重复密钥，则可能会出错。因此您可以尝试按$ index进行跟踪，并相应地更新和处理元素的ID。

发布您在控制台中遇到的错误。

Answer 2

您应尝试将ng-attr-id用于动态ID

以下是您的代码示例：

<div ng-repeat="result in results track by $index">
  <div ng-attr-id="{{'chartSD' + $index}}" class="col-12 column-with-left-padding column-with-right-padding" style="height: 500px">
    <div class="divider-40"></div>
    <canvas ng-attr-id="{{'chartSDG' + $index}}"></canvas>
  </div>
</div>

这会将其呈现为id="chartSD0"，依此类推。然后您的document.getElementById将能够正确选择它。