jQuery. Отложенное исключение: geoChart.addEventListener не является функцией TypeError: geoChart.addEventListener не является функцией - PullRequest
Новая
       6

jQuery. Отложенное исключение: geoChart.addEventListener не является функцией TypeError: geoChart.addEventListener не является функцией

0 голосов
/ 17 января 2020

У меня есть страница, где я загружаю таблицы и диаграммы. В иерархических сетках и в иерархических диаграммах используется один и тот же вебапис. Итак, я сначала вызываю функцию загрузки сеток, а затем вызываю диаграмму создания после загрузки сеток. Таким образом, данные ajax, возвращаемые из сетки, сохраняются в localStorage и повторно используются в диаграмме.

Сначала я загружаю сетку, и когда она будет завершена, я создаю диаграмму 

            $.when(CreateGeoGrids()).then(CreateLabelChart());

У меня есть 3 диаграммы и 3 сетки в этом иерархическом порядке - Страна -> Регион -> Территории ( Область Провинция)

И все диаграммы являются столбцовыми диаграммами - выбор столбца страны на диаграмме страны загружает диаграмму региона, а выбор региона на диаграмме региона загружает территории. Для диаграмм я использовал gijgogrids ApexCharts & grid

Все работало нормально, пока я не добавил событие изменения выпадающего списка (Изменить регионы) для изменения последнего графика территории / StateProvince. Итак, я удалил это выпадающее меню &? его события. Тем не менее я получаю эту ошибку

Uncaught TypeError: geoChart.addEventListener не является функцией в двух строках кода 

            geoChart.addEventListener('dataPointSelection', function (e, chart, opts) {


            $.when(CreateGeoGrids()).then(CreateLabelChart());

Эта ошибка в функции диаграммы, Укажите CreateLabelChart c, где я создаю и отображаю как диаграмму страны, так и диаграмму региона. И в этой функции есть четыре addEventListener - по два для страны и региона

События, добавленные через слушателей:

  1. geoChart.addEventListener ('dataPointSelection', function (e, chart) , opts) {

geoChart - диаграмма страны и событие dataPointSelection добавляется через addEventListener, и здесь выдается ошибка и для всех addEventListener, которые следуют также, если я комментирую этого слушателя. Это событие для выбора столбца щелкнув по столбцу в диаграмме страны, это должно загрузить данные в диаграмму региона для выбранной страны

geoChart.addEventListener ('updated', function (chart) {

Это событие вызывается после загрузки данных в диаграмму региона.

Итак, все эти события для диаграмм addEventListeners предоставляются диаграммами apex на их сайте [Apex dynamici c chart] [1]

Ниже приведен полный код в моем файле JS Sales . js 

function CreateGeoGrids() {
                var countryGrid, onSuccessFuncForCountry = function (data) {
                    localStorage.setItem('stackedCountryChartSourceData', JSON.stringify(data));
                    countryGrid.render(data);
                };

                countryGrid = $('#countryGrid').grid({
                    primaryKey: 'CountryId',
                    dataSource: { url: 'http://localhost:51604/api/Sales/GetSalesByGeo', data: {}, success: onSuccessFuncForCountry },
                    columns: [
                        { field: 'CountryId', hidden: true },
                        { field: 'SalesTerritoryCountry', title: 'Country' },
                        { field: 'TotalMargin', title: 'Total Margin' }
                    ],
                    complete: function (data) {

                    },

                    detailTemplate: '<div><table id="regGrid"/></div>'
                });
                countryGrid.on('detailExpand', function (e, $detailWrapper, CountryId) {
                    regGrid = $detailWrapper.find('table').grid({
                        params: { CountryId: CountryId },
                        primaryKey: 'GridRowIndex',
                        dataSource: 'http://localhost:51604/api/Sales/GetSalesByRegion',
                        columns: [
                            { field: 'ProductCategoryKey', hidden: true },
                            { field: 'EnglishProductCategoryName', title: 'Category' },
                            { field: 'SalesTerritoryKey', hidden: true },
                            { field: 'SalesTerritoryRegion', title: 'Region' },
                            { field: 'CalendarYear', title: 'Year' },
                            { field: 'Total_Sales', title: 'Total Sales' },
                            { field: 'Total_cost', title: 'Total Cost' },
                            { field: 'Total_Margin', title: 'Total Margin' }
                        ],
                        pager: { limit: 5 }

                    });

                    countryGrid.on('dataBound', function (e, records, totalRecords) {
                        stackedCountryChartSourceData = JSON.stringify(records);

                    });
                    regGrid.on('dataBound', function (e, records, totalRecords) {
                        regGrid.setSelected(1);
                        document.getElementById('stateProvGrid').style.visibility = "visible";
                        $("#divYear").visibility = "visible";
                        $("#divRegion").visibility = "visible";
                        $("#divCategory").visibility = "visible";
                        defaultCategory = records[0].EnglishProductCategoryName;
                        defaultRegion = records[0].SalesTerritoryRegion;
                        defaultYear = records[0].CalendarYear;
                        $("#selectedRegion").text(defaultCategory);
                        $("#selectedCategory").text(defaultRegion);
                        $("#selectedYear").text(defaultYear);
                        dynamicRegionChartSource = records;
                        loadGrid(defaultCategory, defaultRegion, defaultYear);
                    });

                    regGrid.on('rowSelect', function (e, $row, record) {
                        var data = regGrid.get(regGrid.getSelected());
                        $("#selectedRegion").text(data.SalesTerritoryRegion);
                        $("#selectedCategory").text(data.EnglishProductCategoryName);
                        $("#selectedYear").text(data.CalendarYear);

                        stateProvGrid.reload({
                            EnglishProductCategoryName: data.EnglishProductCategoryName, SalesTerritoryRegion: data.SalesTerritoryRegion,
                            CalendarYear: data.CalendarYear, page: 1
                        });
                    });

                });
                countryGrid.on('detailCollapse', function (e, $detailWrapper, CountryId) {
                    $detailWrapper.find('table').grid('destroy', true, true);
                    document.getElementById('stateProvGrid').style.visibility = "hidden";
                    $("#divYear").visibility = "hidden";
                    $("#divRegion").visibility = "hidden";
                    $("#divCategory").visibility = "hidden";

                    stateProvGrid('destroy', true, true);
                });
            }
            $.when(CreateGeoGrids()).then(CreateLabelChart());
...