添加新列時的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列動畫

回答

相關問題