我正在使用 apex 动态图表Apex 动态图表
而且我被困在 ajax 调用和图表渲染部分。有国家条形图。当我单击国家/地区栏时，选定的 countryID 将传递给下面的 updateStacked100Chart 函数（使用 countryID 调用 ajax webapi），以在 stack100 顶点图表中获取该国家/地区的区域数据。在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
}
});
}
}