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

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

Uncaught (in promise) TypeError: google.visualization.LineChart is not a constructor at $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 и другими локально определенными массивами. Но я не могу заставить его работать в моем контексте, где он должен быть в разных файлах.

все это было прекрасно WhiteHat. Я как-то понял, что давало ошибку. Я отправлю это как ответ.

Harshith Rai 11.09.2018 08:09
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
1 374
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Пришлось поменять:

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

в

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

это связано с загрузкой 'packages' - google.charts.Line - это диаграмма Материал, загруженная с пакетом 'line' - google.visualization.LineChart - диаграмма Классический, загруженная с пакетом 'corechart' - имейте в виду, что есть несколько параметров конфигурации, которые не поддерживаются Материал, см. Выпуск №: 2143

WhiteHat 11.09.2018 13:08

О, я этого не знал. Спасибо за информацию @WhiteHat.

Harshith Rai 11.09.2018 13:20

Другие вопросы по теме