我正在使用chart.js绘制折线图的插件。
我想在绘制图表之前显示加载情况。
我尝试过关注,但没有任何反应。
这里显示 jQuery 错误:
Uncaught ReferenceError: progress is not defined
但在我的应用程序中它没有显示错误。
如何在绘制图表之前显示动画或加载?
我正在使用semantic-ui作为CSS框架。
new Chart(document.getElementById("line-chart"),{
type: 'line',
data:{
labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
datasets: [{
data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
},{
data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
},{
data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
},{
data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
},{
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options:{
title:{
display: true,
text: 'World population per region (in millions)'
},
animation:{
onProgress: function (animation){
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="line-chart" ></canvas>
最佳答案
看来您是基于 animations callbacks 上显示的代码Chartjs 文档的一部分。
该代码只是部分代码。页面上的链接已损坏,但以下是正确的完整代码:progress-bar example
在onProgress
属性上定义的函数在图表动画的每一步都会被调用,从而用于填充进度条。给您带来未定义错误的 progress
变量应该事先在您的代码中定义。在github链接上它在线#26
关于jquery - Chart.js - 如何在绘制图表之前显示加载动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44338545/