嗨，我有一个使用chartjs的水平条形图，我可以加载数据，但是如何在未渲染的情况下将加载屏幕放在画布上。我的图表需要大约10秒钟才能呈现。
我已经尝试过。
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
},
但是给了我progress is not defined的错误。
这是我在图表上的完整代码
图表js
//global variable of chart inable 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";
}
}
}
});
}
jqery关于提取数据
//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>
您需要在下面添加此html
<canvas id="canvas"></canvas>
<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress> // you missed this html
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var progress = document.getElementById('animationProgress'); // and missed this
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: []// your dataset
},
options: {
title:{
display:true,
text: "Progress Bar"
},
animation: {
duration: 2000,
onProgress: function(animation) {
//add progress
progress.value = animation.currentStep / animation.numSteps;
},
onComplete: function(animation) {
window.setTimeout(function() {
progress.value = 0;
}, 2000);
}
}
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};