Перерисовать (или анимировать) диаграмму chart.js при переходе в deck.js

Я сделал слайд-шоу deck.js, и на одном из слайдов есть круговая диаграмма chart.js.

Я пытаюсь анимировать круговую диаграмму каждый раз при переходе слайда. В настоящее время он анимируется только при первом переходе после обновления браузера.

Я попытался добавить расширение deck.events.js и использовать chart.update(), но это говорит, что диаграмма не определена. Без deck.becameCurrent фрагмент, диаграмма показывает, и с фрагментом console.log работает.

Как мне заставить deck.event распознать экземпляр диаграммы?

Является chart.update() правильный метод для запуска начальной анимации здесь?

    <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
<script src='{% static "vendor/deckjs/core/deck.core.js" %}'></script>
<script src='{% static "vendor/deckjs/extensions/events/deck.events.js" %}'>


        <div class="deck-container">
            <section class="slide" id="pie">
                <script>
                var ctx1 = $("#NestedChart").get(0).getContext("2d");
                var myChart1 = new Chart(ctx1, {
                    type: 'doughnut',
                    data: {
                        labels: [1,2,3,4,5],        
                        datasets: [{
                            data: [10,89,4,34,33],
                        },
                        options: {
                            animation: {
                                duration:2000
                    },
            });
            })
                </script>

                <div style="position: relative; height: 500px; width:500px" class='col-sm-6'>
                    <canvas style="position:absolute; top: 0px; left: 0px" id="NestedChart" width="400" height="400"></canvas>
                </div>
           </section>
       </div>

    <script>
      $(function() {
        $.deck('.slide', {countNested: false});

        $("#pie").bind('deck.becameCurrent', function(ev, direction) {
            console.log("test chart update");
            myChart1.update();
         });
      });
    </script>
    </body>
Источник

1 ответ

Решение

Я заставил это работать, переместив код, который определяет диаграмму, чтобы быть в пределах becameCurrent функция события:

 $(function() {
    $.deck('.slide', {countNested: false});
    $.deck('showGoTo');
    $("#pie").bind('deck.becameCurrent', function(ev, direction) {
        const ctx1 = $("#NestedChart").get(0).getContext("2d");
        const myChart1 = new Chart(ctx1, {.....

Это затем повторно визуализирует диаграмму при каждом переходе. Цикл if позволяет анимировать только при прямом переходе. Размещение объявления переменной myChart1 в другом месте инициализирует диаграмму в первый раз, но myChart1.render() или же myChart1.reset().update() в функции cameCurrent() все еще ничего не происходит.

Источник
Другие вопросы по тегам