由网友(绝代女妖精)分享简介：我有一个充满图表的页面，它会自动生成所有可用的图表(因为默认页面是所有图表").其中有一个选择部门标签，它将隐藏除所选部门拥有的图表之外的所有图表.这是我的代码:I have a page full of charts that automatically generates all charts available...

我有一个充满图表的页面，它会自动生成所有可用的图表(因为默认页面是所有图表").其中有一个选择部门标签，它将隐藏除所选部门拥有的图表之外的所有图表.这是我的代码:

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 动画.到目前为止，我已经尝试过 easing、onProgress 和 jQuery animate.没有工作.是否可以重新动画图表?如果有，怎么做?

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?

推荐答案

来自 this answer 和缺少选项在 Docs 中可用，看起来唯一可行的选项是这些技巧:

From this answer and from the lack of options available in the Docs, it looks like the only feasible options would be these hacks:

使用 new Chart 或 用 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.:通过函数调用数据，当你想让动画发生时，再次调用相同的函数.因为它现在有一个新数组(即使它是相同的数据)，所以图表会重新设置动画.

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>