Question

我在chart.js 2.1.2中有一个条形图，我刚从1.something升级。在1.something中，您可以指定何时为条形图设置动画。本质上，我在页面加载时加载图表，然后设置计时器以更新数据并每5秒重绘一次图表，而无需用户重新加载页面。我想条形图只能在初始加载时动画，而不是在后续刷新中。在版本1中，您只需要在刷新时更改条形图的动画属性。在2.1.2版中，我没有看到这样做的方法。在这一点上，如果我可以完全禁用条形图的动画，我会很高兴。但是，我还在页面上有其他饼图，动画设置正在运行，所以我不想全局更改动画设置。

HTML（摘录）

aws s3api list-objects --bucket BUCKETNAME --output json --query "[sum(Contents[].Size), length(Contents[])]"

的Javascript

<div class="text-center">
  <div class="row">
    <div id="regbyhour-container" class="col-sm-12">
      <h4>Registrations by Hour</h4>
      <canvas id="regbyhour"></canvas>
    </div>
  </div>
</div>

我在文档here中看不到任何内容，表示您可以使用饼图指定动画选项。我错过了什么？

Answer 1

我最后在chart.js GitHub页面上发布了这个错误，因为我在这里没有收到任何回复。根据etimberg的建议，我改变了drawRegByHourChart功能：

function drawRegByHourChart(animate) {

            $("#regbyhour").remove();
            $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');

            var context = $("#regbyhour");
            var chart = new Chart(context, {
                type: 'bar',
                data: barData
                // Need to enable or disable animation here based on animate parameter
            });
        };

对此：

function drawRegByHourChart(animate) {

        $("#regbyhour").remove();
        $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>');

        var context = $("#regbyhour");
        var chart = new Chart(context, {
            type: 'bar',
            data: barData
        });
        if (!animate) {
            chart.update(0);
        }
    };

Chart.js 2.1.2条形图动画问题

1 个答案: