Angularjs和Chart.js最小示例

Question

I'm using angular and charts.js to create dynamic charts, but the graphics always show empty, there is any minimal example on how to use both of them?

here a plunker: http://plnkr.co/edit/V1gIaCIAixQTcHtBj9YN?p=preview i'm still learning angular, so i'm not sure what i'm doing wrong.

The non working code:

 <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

Here is a fairly simple take on your code: http://plnkr.co/edit/RvtPAcV4JKDkzikeSamM?p=preview

I build the charts into a scope array based on the cuestionario length.

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

Then render the charts inside a timeout to let digest complete:

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
        });
      });
    });
  }

The other big thing to note is that we access the element as an array, "[0]":

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