Angularjs和Chart.js最小示例

Question

我使用angular和charts.js創建動態圖表，但是圖形始終顯示為空，如何使用這兩個圖表有一個最小的示例？

這里是個笨蛋： http ://plnkr.co/edit/V1gIaCIAixQTcHtBj9YN?p=preview我仍在學習有角度的知識，所以我不確定我在做什么錯。

非工作代碼：

 <div ng-repeat="e in encuesta.cuestionario">
          <!--This doesn't works!-->
          <div id="canvas-holder" class="col-sm-4">
            <canvas id="{{'chart-area-'+$index}}" width="250" height="250" />
          </div>
          <div class="col-sm-6 formulario">
            <ul>
              <li>
                <p>{{e.pregunta}}</p>
              </li>
            </ul>
          </div>

        </div>

Answer 1

這是您的代碼相當簡單的方法： http : //plnkr.co/edit/RvtPAcV4JKDkzikeSamM?p=preview

我根據cuestionario長度將圖表構建到范圍數組中。

for (i = 1; i < $scope.encuesta.cuestionario.length; i++) {
    $scope.charts.push({
        chartId: i
    });
}

然后在超時內渲染圖表以使摘要完成：

function loadCharts() {
    $timeout(function() {
      angular.forEach($scope.charts, function(chart) {
        var ctx = angular.element(document.getElementById("chart-area-" + chart.chartId))[0].getContext("2d");
        window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
          responsive: true
        });
      });
    });
  }

另一個需要注意的重要事情是我們將元素作為數組“ [0]”進行訪問：

var ctx = angular.element(document.getElementById("chart-area-" + chart.chartId))[0].getContext("2d");