Question

我正在使用顶点动态图表Apex dynamic chart

我陷入了ajax调用和图表渲染部分。有国家条形图。当我单击国家/地区栏时，所选的countryID将传递到下面的updateStacked100Chart函数（该函数使用countryID调用ajax webapi）以在stacked100顶点图表中获取该国家/地区的区域数据。在ajax调用完成之前，首先呈现一个空的stacked100顶点图表。我该如何解决？

 //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是Async。您应该在“成功”部分中调用render。因此，您可以肯定的是，“系列”数组具有数据。

Ajax调用完成后如何呈现我的顶点图表？

1 个答案: