ChartJS 在 show() 调用时重放图表动画

2022-01-22 00:00:00 javascript chart.js

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

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>

相关文章