添加新列时的Highchart列动画答案

【问题标题】：Highchart column animation when adding new column添加新列时的Highchart列动画
【发布时间】：2017-02-24 12:06:32
【问题描述】：

我正在尝试使用 highchart 制作一个每 5 秒更新一次的简单条形图。下面是我的代码：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <script src="https://code.highcharts.com/highcharts.js"></script>
                <script src="https://code.highcharts.com/modules/exporting.js"></script>
                <script src="underscore-min.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
        <script>

                Highcharts.chart('container', {
                        chart: {
                                type: 'column'
                        },
                        title: {
                                text: 'Activity Count per Model'
                        },
                        xAxis: {
                                categories: [],
                                crosshair: true,
                                title: {
                                        text: 'Model'
                                }
                        },
                        yAxis: {
                                min: 0,
                                title: {
                                        text: 'Activity Count'
                                }
                        },
                        plotOptions: {
                                column: {
                                        animation: true,
                                        pointPadding: 0.2,
                                        borderWidth: 0
                                }
                        },
                        series: [{
                                name: 'Count',
                                data: []

                        }]
                });

                setInterval(function(){
                        $.getJSON("http://localhost/getdata.php", function(data){
                                $('#container').highcharts().series[0].setData(data.value,true);
                                $('#container').highcharts().xAxis[0].setCategories(data.model);
                        });
                }, 5000);

        </script>
</html>

JSON 调用返回的数据：

{"model":["a","aa","aaa","aaaa","aab","b","c","d","e"],"value":[40,20,70,40,70,20,30,40,50]}

现在，代码在功能上运行良好（图表显示每 5 秒更新一次数据）。问题是，如果图表更新为新列，则上面没有动画。但是，如果在不添加新列的情况下更新现有数据，则其中会有动画（列增长/缩小，如果轴发生变化，则其他列调整）。如何在图表中插入新列时启用动画？

【问题讨论】：

标签： javascript animation highcharts

【解决方案1】：

在这种情况下，图表应该有不同的动画效果。所以你应该考虑你想要什么动画。

来自setData() docs：

当更新的数据与现有数据的长度相同时，默认会更新点，动画可视化点的变化情况。

在您的情况下，您可以将数据分成两部分 - 新点和其余数据。其余数据可以使用setData() 设置 - 您将保留动画，因为旧数据和新数据具有相同的长度。并且可以通过addPoint()添加动画。

$('#button').click(function () {
  const data = new Array(12).fill(2)
  chart.xAxis[0].setCategories(categories.concat('13'), false);
  chart.series[0].setData(data);
  chart.series[0].addPoint(40, true, false, true);
});

示例：http://jsfiddle.net/Lqy2e42h/

【讨论】：

在我看来，这个解决方案并没有解决实际问题，即新栏没有动画。这只是为新栏周围的所有内容设置动画......
动画新栏 - 需要一个旧值，所以动画有起点和终点 - 这就是 point.update() 动画需要的。 addPoint() 动画在这种情况下不会为点设置动画，而是为轴设置动画。无论如何，它仍然可以通过添加一个虚拟点来实现 - jsfiddle.net/Lqy2e42h/1
有道理。如果图表可以处理为新数据创建起点的逻辑，然后对其进行动画处理，那就太好了，但是添加虚拟点的解决方案是一个非常有用的解决方法。谢谢。