仪表板加载时，顶点图无法正常工作。它有时出现，有时不出现

Question

我在仪表板上显示apexcharts时遇到问题。我在仪表板上有5个图表，图表的行为非常奇怪。所有图表在重新加载页面3到4次后或单击inspect元素时显示。否则显示2或3个图表。如何解决此问题。

让我们看看。。。这是我通过ajax获取所有数据的Js文件
当我做控制台日志时，我可以在数据键中看到值。

var revenueData = [];
var fetchEarningData = function() {
$.ajax({
url: "dashboard/earning",
type: "Get",
dataType: "json",
cache: false,
success: function (data) {
jQuery.map(data, function (n) {
revenueData.push(n)
});
},
complete: function (data) {
},
error: function (data) {
}
});
}
var customerData = [];
var fetchCustomerData = function (){
$.ajax({
url: "dashboard/customer",
type: "Get",
dataType: "json",
cache: false,
success: function (data) {
customerData.push(data)
},
complete: function (data) {
},
error: function (data) {
}
});
}
var fetchMemberData = function (){
$.ajax({
url: "dashboard/member",
type: "Get",
dataType: "json",
cache: false,
success: function (data) {
customerData.push(data)
},
complete: function (data) {
},
error: function (data) {
}
});
}
var orderData = [];
var fetchOrderData = function (){
$.ajax({
url: "dashboard/order",
type: "Get",
dataType: "json",
cache: false,
success: function (data) {
jQuery.map(data, function(n) {
orderData.push(n)
});
},
complete: function (data) {
handleRenderChart()
},
error: function (data) {
}
});
};
var stockInAmount = [];
var fetchStockInAmountData = function (){
$.ajax({
url: "dashboard/stockIn-amount",
type: "Get",
dataType: "json",
cache: false,
success: function (data) {
// console.log('new',data)
// Prepare series &  xaxis category data for stacked100 region chart
jQuery.map(data, function (n) {
stockInAmount.push(n)
});
},
complete: function (data) {
},
error: function (data) {
}
});
}
var debitData = [];
var fetchDebitData = function (){
$.ajax({
url: "dashboard/debit-amount",
type: "Get",
dataType: "json",
cache: false,
success: function (data) {
jQuery.map(data, function(n) {
debitData.push(n)
});
},
complete: function (data) {
},
error: function (data) {
}
});
}
var creditData = [];
var fetchCreditData = function (){
$.ajax({
url: "dashboard/credit-amount",
type: "Get",
dataType: "json",
cache: false,
data: {
},
success: function (data) {
jQuery.map(data, function(n) {
creditData.push(n)
});
},
complete: function (data) {
},
error: function (data) {
}
});
}
var handleRenderChart = function() {
// global apexchart settings
Apex = {
title: {
style: {
fontSize:  '14px',
fontWeight:  'bold',
fontFamily:  app.font.family,
color:  app.color.white
},
},
legend: {
fontFamily: app.font.family,
labels: {
colors: '#fff'
}
},
tooltip: {
style: {
fontSize: '12px',
fontFamily: app.font.family
}
},
grid: {
borderColor: 'rgba('+ app.color.whiteRgb + ', .25)',
},
dataLabels: {
style: {
fontSize: '12px',
fontFamily: app.font.family,
fontWeight: 'bold',
colors: undefined
}
},
xaxis: {
axisBorder: {
show: true,
color: 'rgba('+ app.color.whiteRgb + ', .25)',
height: 1,
width: '100%',
offsetX: 0,
offsetY: -1
},
axisTicks: {
show: true,
borderType: 'solid',
color: 'rgba('+ app.color.whiteRgb + ', .25)',
height: 6,
offsetX: 0,
offsetY: 0
},
labels: {
style: {
colors: '#fff',
fontSize: '12px',
fontFamily: app.font.family,
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
}
}
},
yaxis: {
labels: {
style: {
colors: '#fff',
fontSize: '12px',
fontFamily: app.font.family,
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
}
}
}
};

// small stat chart
var x = 0;
var chart = [];

var elmList = [].slice.call(document.querySelectorAll('[data-render="apexchart"]'));
elmList.map(function(elm) {
var chartType = elm.getAttribute('data-type');
var chartHeight = elm.getAttribute('data-height');
var chartTitle = elm.getAttribute('data-title');
var chartColors = [];
var chartPlotOptions = {};
var chartData = [];
var chartStroke = {
show: false
};
if (chartType === 'bar') {
chartColors = [app.color.theme];
chartPlotOptions = {
bar: {
horizontal: false,
columnWidth: '65%',
endingShape: 'rounded'
}
};
chartData = [{
name: chartTitle,
data:  revenueData
}];
} else if (chartType === 'pie') {
chartColors = ['rgba('+ app.color.themeRgb + ', 1)', 'rgba('+ app.color.themeRgb + ', .75)', 'rgba('+ app.color.themeRgb + ', .5)'];
chartData = customerData
} else if (chartType === 'donut') {
chartColors = ['rgba('+ app.color.themeRgb + ', .15)', 'rgba('+ app.color.themeRgb + ', .35)', 'rgba('+ app.color.themeRgb + ', .55)', 'rgba('+ app.color.themeRgb + ', .75)', 'rgba('+ app.color.themeRgb + ', .95)'];
chartData = stockInAmount;
chartStroke = {
show: false,
curve: 'smooth',
lineCap: 'butt',
colors: 'rgba(' + app.color.blackRgb + ', .25)',
width: 2,
dashArray: 0,
};
chartPlotOptions = {
pie: {
donut: {
background: 'transparent',
}
}
};
} else if (chartType === 'line') {
chartColors = [app.color.theme];
chartData = [{
name: chartTitle,
data: orderData
}];
chartStroke = {
curve: 'straight',
width: 2
};
}
var chartOptions = {
chart: {
height: chartHeight,
type: chartType,
toolbar: {
show: false
},
sparkline: {
enabled: true
},
},
dataLabels: {
enabled: false
},
colors: chartColors,
stroke: chartStroke,
plotOptions: chartPlotOptions,
series: chartData,
grid: {
show: false
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
},
formatter: (value) => { return ''+ value },
}
},
xaxis: {
labels: {
show: true
}
},
yaxis: {
labels: {
show: true
}
}
};
chart[x] = new ApexCharts(elm, chartOptions);
chart[x].render();
x++;
});

var serverChartOptions = {
chart: {
height: '100%',
type: 'bar',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
grid: {
show: true,
borderColor: false,
},
stroke: {
show: false
},
colors: ['rgba('+ app.color.whiteRgb + ', .25)', app.color.theme],
series: [
{
name: 'DEBIT',
data:  debitData
},
{
name: 'CREDIT',
data: creditData
}],

xaxis: {
// categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', 30],
labels: {
show: true
}
},
fill: {
opacity: .65
},
tooltip: {
y: {
formatter: function (val) {
return "BDT " + val
}
}
}
};

var apexServerChart = new ApexCharts(
document.querySelector('#chart-server'),
serverChartOptions
);
apexServerChart.render();
};
fetchEarningData()
fetchMemberData()
fetchCreditData()
fetchDebitData()
fetchOrderData()
/* Controller
------------------------------------------------ */
$(document).ready(function() {
// window.location = window.location.href;
// setInterval(function(){
//     window.location.reload();
//
// }, 3000);
// setInterval(10000);
// handleRenderChart()
document.addEventListener('theme-reload',  function() {
$('[data-render="apexchart"], #chart-server').empty();
handleRenderChart()
});
let serial = 1;
fetch(`dashboard/top-products`)
.then(res => res.json())
.then(res => {
// console.log(res)
$('#topProducts').html(res.map((topProducts) => ` <tbody>
<tr>
<td>
<div class="d-flex">
<div class="position-relative mb-2">
<div class="position-absolute top-0 start-0">
<span class="badge bg-theme text-theme-900 rounded-0 d-flex align-items-center justify-content-center w-20px h-20px">${serial++}</span>
</div>
</div>
<div class="flex-1 ps-3">
<div class="mb-1"><small class="fs-9px fw-500 lh-1 d-inline-block rounded-0 badge bg-white bg-opacity-25 text-white text-opacity-75 pt-5px">${topProducts.barcode_number}</small></div>
<div class="fw-500 text-white">${topProducts.title}</div>
BDT ${topProducts.price}
</div>
</div>
</td>
<td>
<table class="mb-2 mt-2">
<tr>
<td class="pe-3">TOTAL SOLD:</td>
<td class="text-white text-opacity-75 fw-500">${topProducts.total}</td>
</tr>
<tr>
<td class="pe-3">REVENUE:</td>
<td class="text-white text-opacity-75 fw-500">${topProducts.total * topProducts.price} BDT</td>
</tr>
</table>
</td>
<td>
<a href="product/${topProducts.uuid}" class="text-decoration-none text-white"><i class="bi bi-search"></i></a>
</td>
</tr>
</tbody>` ))
})
});

Answer 1

这似乎对我有用；在每个函数调用上动态生成图表div，以绘制图表数据

<div class="card" style="padding:0" id="charts">                   
<div class="card-body" style="padding:0" id="tagchart"> 
<div id="chart"></div>                
</div>

var c = document.getElementById("tagchart");
var d = document.getElementById("chart");
c.removeChild(d);
var newdiv = document.createElement("div");
newdiv.setAttribute("id", "chart");
c.appendChild(newdiv);