Angularjs和Chart.js最小的例子

时间:2015-11-25 16:00:51

标签: javascript angularjs charts

我使用angular和charts.js来创建动态图表,但图形总是显示为空,有关于如何使用它们的任何最小示例吗?

这里有一个plunker:http://plnkr.co/edit/V1gIaCIAixQTcHtBj9YN?p=preview 我还在学习角度,所以我不确定我做错了什么。

非工作代码:

type

1 个答案:

答案 0 :(得分:2)

以下是对您的代码的一个相当简单的看法: 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");