Chart.js 2.1.2 条形图动画问题答案

【问题标题】：Chart.js 2.1.2 Bar Chart Animation IssueChart.js 2.1.2 条形图动画问题
【发布时间】：2016-05-19 00:54:49
【问题描述】：

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

HTML（摘录）

<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>

Javascript

        <script type="text/javascript">
            var barData = defineBarDataArray();

            $(function () {
                // Global Chart Options
                Chart.defaults.global.legend.display = false;
                Chart.defaults.global.maintainAspectRatio = true;
                // Bar Chart Options
                Chart.defaults.bar.scaleBeginAtZero = false;

                updateBarChart(true)

                setInterval(function () {
                    updateBarChart(false)
                }, 5000);
            });

            function defineBarDataArray() {
                return {
                    labels: [],
                    datasets: [{
                        label: "Registrations",
                        backgroundColor: "rgba(151,187,205,0.5)",
                        borderColor: "rgba(151,187,205,0.8)",
                        borderWidth: 3,
                        data: []
                    }]
                };
            };

            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 updateBarChart(animate) {
                barData = defineBarDataArray();
                barData.labels.push("12:00 PM");
                barData.labels.push("1:00 PM");
                barData.labels.push("2:00 PM");
                barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
                barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
                barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000));
                drawRegByHourChart(animate);
            };
        </script>

我在here 文档中没有看到任何内容说您可以像使用饼图一样指定动画选项。我错过了什么？

【问题讨论】：

标签： javascript jquery chart.js

【解决方案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);
        }
    };

【讨论】：