Question

出于某种原因，当我尝试使用AngularJS时，此图表不会绘制。如果我没有AngularJS这样做似乎工作正常，所以问题似乎与它有关。我在控制台中没有任何错误，所以我需要一些帮助。

HTML：

<div ng-controller="MyCtrl">
        <graph ng-repeat="graph in graphs" data="graph.data"></graph>
</div>

JS：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.graphs = [
        {
            data: [1, 2, 3, 4, 5, 6, 7,8,9],      
        }
    ];
});

myApp.directive('graph', function() {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },

        template: "<canvas></canvas>",
        link: function(scope, elem, attrs) {
                console.log(scope);
            var ctx = elem.children()[0].getContext("2d");

            var lineChartData = {
              datasets: [{
                data: scope.data,
              }]
            };

            var graph = new Chart(ctx, {
              type: "bubble",
              data: lineChartData,
        });
        }
    };
});

Answer 1

好的，这是您更新的jsfiddle

看起来你犯了一些错误，描述data和ng-repeat是多余的。

Chart.js没有使用AngularJS绘图

1 个答案: