ajax調用完成后如何呈現我的頂點圖表？

Question

我正在使用Apex 動態圖表 Apex 動態圖表

我被困在 ajax 調用和圖表渲染部分。 有國家條形圖。 當我單擊國家/地區欄時，選定的 countryID 將傳遞給下面的 updateStacked100Chart 函數（它使用 countryID 調用 ajax webapi），以在 stacked100 頂點圖表中獲取該國家/地區的區域數據。 在ajax調用完成之前，首先呈現一個空的stacked100 apex Chart。 我該如何解決？

 //sourceChart=CountryBarChart,destChartIDToUpdate=Stacked100RegionYearChart(Chart to be updated based on country bar selected)
        function updateStacked100Chart(sourceChart, destChartIDToUpdate) {
            var series = [];
            var seriesIndex = 0;
           var categorySource = [];
            var color = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];

            if (sourceChart.w.globals.selectedDataPoints[0]) {
                //Get selected country bar in CountryBarChart
                var selectedPoints = sourceChart.w.globals.selectedDataPoints;
                for (var i = 0; i < selectedPoints[seriesIndex].length; i++) {
                    var selectedIndex = selectedPoints[seriesIndex][i];
                    var selectedCountry = sourceChart.w.globals.labels[selectedIndex];
                    $.ajax({
                        url: "http://localhost:51604/api/Sales/GetSalesByRegion",
                        type: "Get",
                        dataType: "json",
                        cache: false,
                        data: {

                            "CountryId": selectedCountry,
                            "page": 0,
                            "limit": 0
                        },

                        success: function (data) {
                            // Prepare series &  xaxis category data for stacked100 region chart
                            $.each(data.salesByRegQuery, function (index, item) {
                                series.push(
                                    {
                                        name: item.EnglishProductCategoryName,
                                        data: item.Total_Margin
                                    });
                                categorySource.push(item.CalendarYear);

                            });


                        },
                        complete: function (data) {

                        },

                        error: function (data) {

                        }
                    });
                }

                //These lines of codes below get executed first before ajax call is completed.
                if (series.length === 0) series = [{
                    data: []
                }];
                //So, region stacked100 apex chart source data for series and xaxis aren't updated
                return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
                    series: series,
                    xaxis: categorySource,
                    colors: color,
                    fill: {
                        colors: color
                    }
                });
            }

        }

Answer 1

這是因為默認情況下 Ajax 是異步的。 您應該在“成功”部分調用渲染。 所以你可以肯定，“系列”數組有數據。