ChartJs Угловая директива - диаграмма [chartType] не является функцией

У меня проблемы с простой диаграммой для работы с использованием углового.ChartJs Угловая директива - диаграмма [chartType] не является функцией

У меня есть диаграмма JS, настроенная с помощью «угловой диаграммы-директивы»: «^ 1.0.0» внутри моей беседки. Это правильно вводится на основе источника моего файла.

Я тогда это как мой контроллер:

export class MainController { 
    constructor ($scope) { 
    'ngInject'; 
    this.createGraph($scope); 
    } 

    createGraph($scope) { 
    var vm = this; 
    vm.messages = [{msg: "hello"}]; 

    var data = { 
     labels : ["January","February","March","April","May","June","July"], 
     datasets : [ 
     { 
      fillColor : "rgba(220,220,220,0.5)", 
      strokeColor : "rgba(220,220,220,1)", 
      pointColor : "rgba(220,220,220,1)", 
      pointStrokeColor : "#fff", 
      data : [65,59,90,81,56,55,40] 
     }, 
     { 
      fillColor : "rgba(151,187,205,0.5)", 
      strokeColor : "rgba(151,187,205,1)", 
      pointColor : "rgba(151,187,205,1)", 
      pointStrokeColor : "#fff", 
      data : [28,48,40,19,96,27,100] 
     } 
     ] 
    } 

    $scope.myChart = data; 
    } 

}

И это мой основной HTML:

<div class="container"> 
    <chart value="myChart"></chart> 
</div>

Но я получаю ошибку:

TypeError: chart[chartType] is not a function

Любые идеи?

источник

2016-12-30 Darren Keen.

Убедитесь, что вы правильно refered библиотеки,

DEMO

(function(angular) { 
 
    'use strict'; 
 
    angular.module('myApp', ['chart.js']) 
 

 
    .controller('myController', [function() { 
 
    var ctrl = this; 
 
    ctrl.socialChart = { 
 
     type: 'bar', 
 
     labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], 
 
     series: ['Series A', 'Series B'], 
 
     colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'], 
 
     data : [[65, 59, 80, 81, 56, 55, 40],[28, 48, 40, 19, 86, 27, 90] ] 
 
     } 
 

 
    }]); 
 

 
})(window.angular);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Multi Slot Transclude</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script> <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-app="myApp" ng-controller="myController as ctrl"> 
 
    <canvas id="outreach" class="chart chart-bar" 
 
     chart-labels="ctrl.socialChart.labels" 
 
     chart-data="ctrl.socialChart.data" 
 
     chart-series="ctrl.socialChart.series" 
 
     chart-colors="ctrl.socialChart.colors" 
 
     chart-options="ctrl.socialChart.options"></canvas>  
 
    </body> 
 

 
</html>

источник

2016-12-30 12:42:12 Sajeetharan

Спасибо за это. Я нашел способ заставить его работать. Я изменил версию chart.js на 1.1.1, а затем вместо этой строки: $ scope.myChart = data; Я использовал: $ scope.myChart = {"data": data, "options": {}} –

@DarrenKeen. отметьте как ответ, если это поможет – Sajeetharan

ChartJs Угловая директива - диаграмма [chartType] не является функцией

ответ

Смежные вопросы