2

我制作了一个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>
4

1 回答 1

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()在 becomeCurrent() 函数中似乎仍然没有做任何事情。

于 2017-04-11T10:21:00.453 回答