添加新列时的Highchart列动画

我试图制作一个简单的条形图，每5秒更新一次使用highchart。下面是我的代码：添加新列时的Highchart列动画

<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秒的数据）。问题是，如果图表更新为新列，则没有动画。但是，如果现有数据在不添加新列的情况下更新，则其中有动画（列成长/收缩，其他列调整如果轴更改）。如何在将新列插入图表时启用动画？

来源

2017-02-24 Aldibe

在这种情况下，图表应具有不同的动画可能性。所以你应该考虑你想要的动画。

从setData()文档：

当更新的数据是相同的长度中的现有数据，点将被默认更新，并且动画如何可视化的点被改变。

对于您的情况，您可以将数据分为两部分 - 新点和其余数据。其余数据可以使用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/

来源

2017-02-24 13:01:24 morganfree

在我看来，这种解决方案并没有解决实际问题，这是不被动画新的吧。这只是动画新酒吧周围的一切... – jlbriggs

要为新酒吧设置动画 - 需要一个旧值，所以动画有起点和终点 - 这是point.update（）动画需要的。在这种情况下，addPoint（）动画不会使点动画，而是轴。无论如何，它仍然可以通过添加虚拟点来实现 - http://jsfiddle.net/Lqy2e42h/1/ – morganfree

有道理。如果图表能够处理为新数据创建起点的逻辑，然后对其进行动画处理，那么会很好，但是添加虚拟点的解决方案是一个相当实用的解决方案。谢谢。 – jlbriggs

添加新列时的Highchart列动画

回答

相关问题