使用 chart js 和 angular with ng-repeat 的动态图表

Question

我现在可以显示具有动态数据但图表数量固定的图表。当我想显示动态数量的图表时，ng-repeate 会发生一些事情。我说发生了什么事，因为如果在 mycharts[0].container.outerHTML 中我有 html 需要显示图表（由库生成），如果我复制并粘贴到 html 中的固定位置，它将显示图表。我的 ng-repeate 代码如下所示：

<div class="row" ng-controller="nodesDataTablesCtrl as nodeCtrl" >
  <div  ng-repeat="(index, node) in nodeCtrl.nodes"  on-finish-render>
    <div class="row">
      <div class="col-lg-12">
        <div id="{{ node.name }}_MEMORY" class="ct-chart snp_dynamic_chart"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

我找到了解决方案，我不确定是不是 ng-repeate 或 Chartist 的错误。

在我的 ng-repeate 中，我使用 nodeCtrl.nodes，其中 是我收到的一个数组从 http.get，我的解决方案是创建一个 range 函数，即 接收数字和 return 一个从 0 到 n-1 的列表。 我没有传递每次发出请求时都会更新的 nodeCtrl.nodes，而是用 numberOfNodes 更新变量范围函数，我的意思是，我的新 ng-repeat 将如下所示：

<div  ng-repeat="(index, node) in nodeCtrl.numberOfNodes"  on-finish-render>

在我请求的成功函数中，我做了：

numberOfNodes = range(nodeCtrl.nodes.length)

从我的角度来看，这使得 ng-repeate 不会以某种方式在内部更新。

重要的是要以编程方式确定它不应该有所不同但是...

使用 chart js 和 angular with ng-repeat 的动态图表

Dynamics charts using chartist and angular with ng-repeate

angularjs-ng-repeat

chartist.js

angular-chartist.js