新しい列を追加するときのハイチャートの列のアニメーション

ハイチャートを使用して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秒を更新されたデータに現れます）。問題は、チャートが新しい列で更新された場合、それにアニメーションがないことです。しかし、既存のデータが新しい列を追加せずに更新された場合、その中にアニメーションがあります（列の拡大/縮小、軸の変更の場合は他の列の調整）。新しい列がグラフに挿入されたときにアニメーションを有効にするにはどうすればよいですか？

出典

2017-02-24 Aldibe

この場合、グラフをアニメーション化する方法はさまざまです。ですから、どのアニメーションをしたいのかを考えなければなりません。

setData()ドキュメントから：更新されたデータは、既存のデータと同じ長さである場合には

、ポイントはデフォルトで更新され、アニメーションがポイントが変更されている方法を可視化します。

この場合、新しいポイントと残りのデータの2つの部分に分割することができます。残りのデータは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

新しい列を追加するときのハイチャートの列のアニメーション

答えて

関連する問題