Получение ошибки: LineChart не конструктор, и диаграмма не отображается на веб-странице

Question

У меня есть HTML-файл, который должен отображать диаграмму, которая будет показывать детали определенного процесса за последние несколько минут. Это дает ошибку следующим образом, когда я объявляю google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback($scope.drawChart);

Uncaught (в обещании) TypeError: google.visualization.LineChart не является конструктором по $ scope.drawChart

Я не уверен, как иначе вызвать эту функцию. Ниже приведен код в моем файле JS контроллера.

$scope.drawChart = function() {

    var finaldata = [[{label:'Process', type: 'string'}, {label: 'NumOfNewAssociations', type: 'number'}, {label: 'NumOfClosedAssociations', type: 'number'}, {label: 'NumOfSavedImages', type: 'number'}, {label: 'SizeOfSavedImagesInBytes', type: 'number'}]];
    for (var i = 1; i < 2/*$scope.storestats2.length*/; i++) {
        finaldata[i] = [$scope.storestats2.Process, $scope.storestats2.NumOfNewAssociations, $scope.storestats2.NumOfClosedAssociations, $scope.storestats2.NumOfSavedImages, $scope.storestats2.SizeOfSavedImagesInBytes];
    }

    var data = google.visualization.arrayToDataTable(finaldata);
    var options = {
        chart: {
            title: 'Range-wise Store statistics',
            subtitle: 'in the last 30 minutes'
        },
        width: 900,
        height: 500
    };
    var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
    chart.draw(data, google.charts.Line.convertOptions(options));
};

Я даже пытался включить в файл HTML следующее:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

И здесь я намереваюсь вызвать функцию в моем HTML:

<div id="linechart_material" style="width: 900px; height: 500px"></div>

Я также могу видеть пространство, выделенное на веб-странице, но на нем ничего не появляется. Все остальные функции работают отлично, кроме этой диаграммы. Я даже пытался сделать это только для одного графика. Все тот же. Но код работает нормально, когда я делаю это как отдельный HTML-файл со встроенным контроллером JS и другими локально определенными массивами. Но я не могу заставить его работать в моем контексте, где это должно быть в разных файлах.

Answer 1

Я случайно наткнулся на решение этой проблемы.Но я до сих пор не знаю, как это решается и почему.

Все, что мне нужно было сделать, это внести изменения только в одну строку кода:

Мне пришлось изменить:

var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));

в

var chart = new google.charts.Line(document.getElementById('linechart_material'));