Javascript 图表js加载屏幕
我有一个使用chartjs的水平条形图。我可以加载数据，但如何在画布上显示未渲染的加载屏幕？我的图表在渲染前大约需要10秒 我试过这个：Javascript 图表js加载屏幕,javascript,jquery,charts,chart.js,Javascript,Jquery,Charts,Chart.js,我有一个使用chartjs的水平条形图。我可以加载数据，但如何在画布上显示未渲染的加载屏幕？我的图表在渲染前大约需要10秒 我试过这个： onProgress: function(animation) { progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps; }, 但是我犯了一个错误 进展没有定义 这是我在图表上的全部代码 图表js // global v
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
},
// 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";
}
}
}
});
}
<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>
免除45分钟图表
行数：
热化
//你错过了这个html
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var progress=document.getElementById（'animationProgress'）；//错过了这个
变量配置={
键入：“行”，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[]//您的数据集
},
选项：{
标题：{
显示：对，
文本：“进度条”
},
动画：{
期限：2000年，
onProgress:函数（动画）{
//添加进度
progress.value=animation.currentStep/animation.numSteps；
},
onComplete：函数（动画）{
setTimeout（函数（）{
progress.value=0；
}, 2000);
}
}
}
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（ctx，配置）；
};getBreakCnt <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>