添加新列时的Highchart列动画

Question

我正在尝试制作一个简单的条形图，使用高图每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秒更新一次的数据）。 问题是，如果图表使用新列更新，则表示没有动画。 但是如果在不添加新列的情况下更新现有数据，则会在其中显示动画（列增长/缩小，其他列调整，如果轴更改）。 将新列插入图表时如何启用动画？

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

添加新列时的Highchart列动画

问题描述

1 个解决方案

解决方案1
0 2017-02-24 13:01:24

添加新列时的Highchart列动画

问题描述

1 个解决方案

解决方案1 0 2017-02-24 13:01:24

解决方案1
0 2017-02-24 13:01:24