如何解决Chart.js v3淡入淡出动画
我正在尝试使用Chart.js创建图表。我按照自己的意愿进行了所有工作，剩下的就是动画总是从下到上浮动。我只想要淡入淡出的动画，但找不到有关该操作的任何信息。
甚至可以在Chart.js中进行淡入淡出动画吗？到目前为止，这是我的代码： #code
编辑：
我可以使用v3，但是为该图表创建的功能现在无法正常工作。滚动视图后，我将启动“图表动画1”。到那时，折线图已隐藏，只有条形图出现。再过1.5秒，线路应该会淡入淡出。 我曾经通过首先隐藏线，并在延迟后取消隐藏线并更新图表来做到这一点。现在，更新图表也会重设Bar动画。在v2中，它没有执行此操作。有没有办法很快播放动画？
这又是我的代码：
<div class="chartcontainer">
<div class="chartcontainer--inner">
<script src="https://unpkg.com/chart.js@3.0.0-beta/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred"></script>
<style type="text/css">
@media screen and (min-width: 1100px) {
#myChart {min-height: 540px}
}
.chartcontainer {max-width: 67.625rem; margin-right: auto; margin-left: auto; overflow: hidden;}
@media screen and (max-width: 700px){
.chartcontainer--inner {width: 50rem;}
.chartcontainer {overflow: scroll;}
}
</style>
<canvas id="myChart"></canvas>
<script type="text/javascript">
var inView = false;
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function() {
if (isScrolledIntoView('#myChart') && !inView) {
// if (inView) { return; }
inView = true;
console.log('in View: '+ inView);
setTimeout(function(){
var ctx = document.getElementById('myChart').getContext('2d');
myChart = new Chart(ctx,{
type: 'bar',data: {
labels: ['2018','2019','2020'],datasets: [{
label: ['a'],data: [7.1,6.6,6.6],backgroundColor: [
'#05368b','#05368b','#05368b'
],order: 2
},{
label: ['b'],data: [6.5,6.4,6.7],backgroundColor: [
'#1792d7','#1792d7','#1792d7'
],{
label: ['c'],data: [6.1,5.8,6.1],backgroundColor: [
'#6c2475','#6c2475','#6c2475'
],{
label: ['d'],data: [5.7,5.8],backgroundColor: [
'#0d60b5','#0d60b5','#0d60b5'
],{
label: ['e'],data: [4.3,6.1,6.3],type: 'line',lineTension: 0.4,borderColor: "#f48d3b",fill: false,pointBackgroundColor: function() {
var color = "rgba(244,141,59,1)";
console.log(color);
return color;
},poinTradius: function(context) {
var width = context.chart.width;
var size = Math.round(width / 42);
console.log(size);
return size
},borderWidth: 1,order: 1,hidden: true,borderWidth: 5
}]
},options: {
tooltips: {enabled: false},hover: {mode: null},scales: {
yAxes: [{
ticks: {
beginAtZero: true
},gridLines: {
color: '#eee'
}
}],xAxes: [{
gridLines: {
color: '#eee'
}
}]
},legend: {
position: 'bottom',labels: {
padding: 20
}
},plugins: {
datalabels: {
align: 'top',anchor: 'start',color: 'white',// offset: 6,font: function(context) {
var width = context.chart.width;
var size = Math.round(width / 42);
return {
size: size
};
}
}
}
}
});
},1000);
setTimeout(function(){
console.log(myChart.config.data.datasets[4].hidden);
myChart.config.data.datasets[4].hidden = false;
myChart.config.options.animation = {numbers: { duration: 0 },colors: {type: "color",duration: 1000,from: "transparent",}};
myChart.update();
},2500);
} else {
// inView = false;
}
});
</script>
</div>
</div>
解决方法
对于Chart.js v3，您可以使用以下动画选项：
chart.options.animation = {
numbers: { duration: 0 },colors: {
type: "color",duration: 1000,from: "transparent",}
}
对于v2，我认为它们不提供对动画的任何精细控制。如果这对您很重要，则可能需要更新到v3。
附有摘要以显示效果。
var ctx = document.getElementById('myChart').getContext('2d');
myChart = new Chart(ctx,{
type: 'bar',data: {
labels: ['2018','2019','2020'],datasets: [{
label: ['x'],data: [7.1,6.6,6.6],backgroundColor: [
'#05368b','#05368b','#05368b'
],order: 2
},{
label: ['y'],data: [6.5,6.4,6.7],backgroundColor: [
'#1792d7','#1792d7','#1792d7'
],{
label: ['z'],data: [6.1,5.8,6.1],backgroundColor: [
'#6c2475','#6c2475','#6c2475'
],{
label: ['n'],data: [5.7,5.8],backgroundColor: [
'#0d60b5','#0d60b5','#0d60b5'
],{
label: ['av'],data: [4.3,6.1,6.3],type: 'line',lineTension: 0.4,borderColor: "#f48d3b",fill: false,pointBackgroundColor: function() {
var color = "rgba(244,141,59,1)";
console.log(color);
return color;
},pointRadius: function(context) {
var width = context.chart.width;
var size = Math.round(width / 42);
console.log(size);
return size
},borderWidth: 1,order: 1,hidden: true,borderWidth: 5
}]
},options: {
animation: {
numbers: { duration: 0 },colors: {
type: "color",},tooltips: {enabled: false},hover: {mode: null},scales: {
yAxes: [{
ticks: {
beginAtZero: true
},gridLines: {
color: '#eee'
}
}],xAxes: [{
gridLines: {
color: '#eee'
}
}]
},legend: {
position: 'bottom',labels: {
padding: 20
}
},plugins: {
datalabels: {
align: 'top',anchor: 'start',color: 'white',// offset: 6,font: function(context) {
var width = context.chart.width;
var size = Math.round(width / 42);
return {
size: size
};
}
}
}
}
});<script src="https://unpkg.com/chart.js@3.0.0-beta/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>,
我按预期工作了！我回到v2，因为v3给它带来了太多麻烦。
在修改v3时，我意识到我的v2版本可以工作，因为在v2中更新不会重置动画。所以我的答案就是基于此。如果调用.update（0），则更新将在没有动画的情况下进行。所以我创造了这个：
setTimeout(function(){
myChart.config.data.datasets[4].hidden = false;
myChart.update(0);
fadeLoop();
},2500);
var i = 0.15;
function fadeLoop() {
setTimeout(function() {
myChart.config.data.datasets[4].pointBackgroundColor = "rgba(244," + i +")";
myChart.config.data.datasets[4].borderColor = "rgba(244," + i +")";
myChart.update(0);
i += 0.05;
i = Math.round(i * 100) / 100;
if (i <= 1) fadeLoop();
},10)
}
由于我的线条淡入动画应该在Bar动画之后开始，因此我使用hidden属性初始化了。 2.5秒后，我删除了hidden属性并启动了FadeLoop。
我每0.01秒以0.05增量从0.15到1计数i。在循环中，我更新了线条的BG和边框颜色，并“没有动画”对其进行了更新。
这不是最有效的方法，对于较大的图表或速度较慢的网站，我不建议使用。但是对我来说这就足够了。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
