时间戳

首页 > 解决方案 > ChartJS 在 show() 调用时重放图表动画

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

问题描述

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

$(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。没有工作。是否可以重新动画图表？如果是这样，怎么做？

标签： javascriptchart.js

解决方案

从这个答案和Docs中缺乏可用的选项来看，看起来唯一可行的选项是这些黑客：

  • 使用 JS 重绘图表new Chart或
  • 更改一些次要配置，或重新创建图表数据的实例，然后调用该update()方法。

eg：通过函数调用数据，当你想让动画发生时，再次调用相同的函数。因为它现在有一个新数组（即使它是相同的数据），所以图表会重新设置动画。

<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>

推荐阅读