Question

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

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

Answer 1

从this answer到Docs中缺少可用的选项，看来唯一可行的选择就是这些黑客：

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

例如：通过一个函数调用数据，并且当您希望动画发生时，再次调用同一函数。因为它现在有了一个新的数组（即使它是相同的数据），所以该图表也可以重新设置动画。

<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重播图表动画

1 个答案: