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. никто не работает. Можно ли реанимировать график? Если да, то как?


javascript chart.js
person citizenofbuitenzorg    schedule 13.09.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Из этого ответа и из-за отсутствия параметров, доступных в Docs, похоже, единственными возможными вариантами будут следующие хаки:

  • перерисуйте диаграмму с помощью JS, используя 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>

person Ray    schedule 13.09.2018
comment
что за второстепенная конфигурация? - person citizenofbuitenzorg; 14.09.2018
comment
например, изменить цвет границы с «rgb (255, 99, 132)» на «rgb (255, 99, 133)» или просто воссоздать тот же массив данных. Я обновил свой ответ примером. - person Ray; 14.09.2018
comment
извините, что ответил так поздно. да, это действительно работает. и твой пример мне очень поможет. огромное спасибо! - person citizenofbuitenzorg; 17.09.2018