由show()调用时ChartJS重播图表动画 [英] ChartJS replay chart animation when called by show()
问题描述
我有一个充满图表的页面,该页面会自动生成所有可用图表(因为默认页面是所有图表)。其中有一个选择部门标签,该标签将隐藏除所选部门拥有的图表以外的所有图表。这是我的代码:
I have a page full of charts that automatically generates all charts available (because the default page is "All Charts"). In it, there's a select department tag that will hide all charts other than those owned by the selected department. Here's my code:
$(window).load(function(){
$('#department').change(function(){
active_department($(this).val());
});
function active_department(department){
for(var i = 0; i < dept['namedept'].length; i++){
if(department!='All'){
$('.'+dept['namedept'][i]).hide(500);
} else {
if(typeof rCharts[dept['namedept'][i]] != 'undefined'){
$('.'+dept['namedept'][i]).show(500);
} else {
$('.no-chart-'+dept['namedept'][i]).hide(500);
}
}
}
if(typeof rCharts[department] != 'undefined'){
$('.'+department).show(500);
} else {
$('.no-chart-'+department).hide(500);
}
}
});
我希望每次选择部门时都能重新显示ChartJS动画。到目前为止,我已经尝试过缓动,onProgress和jQuery动画。没有工作。是否可以重新设置图表动画?如果是这样,怎么办?
I want ChartJS animation to re-appear every time I select a department. So far I've tried easing, onProgress, and jQuery animate. none's working. Is it possible to re-animate the chart? If so, how?
推荐答案
From this answer and from the lack of options available in the Docs, it looks like the only feasible options would be these hacks:
- 使用
用JS重绘图表新图表
或 - 更改一些次要配置,或重新创建图表数据的实例,然后调用
update()
方法。
- redraw the chart with JS using
new Chart
or - change some minor configuration, or recreate an instance of the chart data and then call the
update()
method.
例如:通过函数调用数据,并且当您希望动画发生时,调用相同的再次起作用。因为它现在有了一个新数组(即使它是相同的数据),所以该图表也会重新设置动画。
e.g.: Call the data through a function, and when you want the animation to happen, call the same function again. Because it now has a new array (even though it's the same data), the chart re-animates.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button onclick="updateChart()">Update</button>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chartData = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: createDataset()
}
};
var chart = new Chart(ctx, chartData);
function updateChart(){
chartData.data.datasets = createDataset()
chart.update();
}
function createDataset(){
return [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
fill: false
}];
}
//ignore next line, it's to deal with a bug from chartjs cdn on stackoverflow
console.clear();
</script>
这篇关于由show()调用时ChartJS重播图表动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!