Apex ダイナミック チャートを使用していますApex ダイナミック チャート
そして、私は ajax 呼び出しとチャート レンダリング セクションで行き詰まっています。カントリー バー チャートがあります。国バーをクリックすると、選択した countryID が updateStacked100Chart 関数 ( countryID で ajax webapi を呼び出す) に渡され、stacked100 apex チャートでその国の地域データが取得されます。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
}
});
}
}