У меня есть горизонтальная гистограмма с использованием диаграммы js. Я могу загрузить данные, но как показать экран загрузки на холсте, пока он не отображается? Мой график занимает около 10 секунд перед рендерингом.
Я пробовал это:
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
},
, но я получил ошибку
прогресс не определен
Вот мой полный код на графике
Диаграмма js
// global variable of chart unable to destroy it
var myBar;
// function for loading side bar graph over break
function loadGrapHorizontal() {
var jsonresult = getBreakCnt();
var labels = jsonresult.map(function (e) {
return e.empName;
});
var data = jsonresult.map(function (e) {
return e.breakCnt;
});
var chartData = {
labels: labels,
datasets: [{
label: 'Break(count) ',
backgroundColor: "#619DFF",
hoverBackgroundColor: "#F564E3",
borderColor: "#619DFF",
data: data,
yAxisID: 'y0'
}]
};
if (myBar) myBar.destroy();
var ctx = document.getElementById("myAreaChart").getContext("2d");
myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: {
legend: {
display: false
},
//hover: {
// events: ['mousemove'],
// onHover: function (event, chartElement) {
// $("#myAreaChart").css("cursor", e[0] ? "pointer" : "default");
// }
//},
onClick: function (evt, element) {
var activePoints = myBar.getElementAtEvent(evt);
$('#<%=hiddenempName.ClientID %>').val(activePoints[0]._model.label);
gettableData();
},
scales: {
yAxes: [{
id: "y0",
weight: 0,
position: "left",
type: 'category',
display: true,
gridLines: {
display: false
},
ticks: {
display: true,
fontStyle: 'bold',
fontSize: 8
}
}, {
id: "y1",
position: "right",
type: 'category',
ticks: {
display: false,
padding: 0
},
gridLines: {
display: false
}
}, ],
xAxes: [{
id: "x1",
ticks: {
beginAtZero: true
}
}],
},
animation: {
duration: 0,
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
},
onComplete: function () {
var chartInstance = this.chart;
ctx.font = Chart.helpers.fontString(5, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = 'red';
ctx.textBaseline = "bottom";
}
}
}
});
}
jQuery при получении данных
//over break side bar graph
function getBreakCnt() {
var counts = {},
params = { graphcount: $('#txtpagenum').val() }
$.ajax({
async: false,
type: 'POST',
contentType: 'application/json',
url: '../Default.aspx/getcountBar',
data: JSON.stringify(params),
dataType: 'json',
success: function (data) { counts = data },
error: function (xhr, status, error) { console.log(xhr, status, error); }
});
return counts.d;
}
Html холст
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-chart-area mr-1"></i>Exeeding 45 Minutes Chart                      
                     
                     
                     
                     
                         
<button type="button" id="btnReload" class="btn btn-primary btn-sm" style="visibility:hidden"><i class="fas fa-redo-alt"></i></button>
</div>
<div class="card-body">
<canvas id="myAreaChart" width="100" height="70"></canvas>
</div>
<div class="card-footer">
           
                     
                     
                     
                     
                    
        
<label id="lblrownum">Row Count:</label>
<input type="text" id="txtpagenum" class="bg-light border-1 small col-sm-1" />
<button id="btngo" type="button" class="btn btn-primary btn-sm">Genarate</button>
</div>
</div>