2016-05-13 9 views
0

私はcharts.js 2.1.2の棒グラフを持っていますが、これは1.somethingからアップグレードしました。 1.somethingでは、棒グラフをアニメートするタイミングを指定できます。基本的には、ページの読み込み時にチャートをロードしてから、データを更新するタイマーを設定し、ユーザーがページをリロードする必要なく5秒ごとにグラフを再描画します。棒グラフは、最初の読み込み時にのみアニメーション化され、その後のリフレッシュではアニメーション化されません。バージョン1.では、棒グラフをリフレッシュするときにアニメーションプロパティを変更するだけで済みました。バージョン2.1.2では、私はそれを行う方法を見ていません。この時点で、棒グラフのアニメーションを完全に無効にできれば幸いです。しかし、アニメーション設定が動作しているページには、アニメーション設定をグローバルに変更したくない他の円グラフもあります。Chart.js 2.1.2棒グラフのアニメーションの問題

HTML(抜粋)

<div class="text-center"> 
    <div class="row"> 
    <div id="regbyhour-container" class="col-sm-12"> 
     <h4>Registrations by Hour</h4> 
     <canvas id="regbyhour"></canvas> 
    </div> 
    </div> 
</div> 

Javascriptを

 <script type="text/javascript"> 
      var barData = defineBarDataArray(); 

      $(function() { 
       // Global Chart Options 
       Chart.defaults.global.legend.display = false; 
       Chart.defaults.global.maintainAspectRatio = true; 
       // Bar Chart Options 
       Chart.defaults.bar.scaleBeginAtZero = false; 

       updateBarChart(true) 

       setInterval(function() { 
        updateBarChart(false) 
       }, 5000); 
      }); 

      function defineBarDataArray() { 
       return { 
        labels: [], 
        datasets: [{ 
         label: "Registrations", 
         backgroundColor: "rgba(151,187,205,0.5)", 
         borderColor: "rgba(151,187,205,0.8)", 
         borderWidth: 3, 
         data: [] 
        }] 
       }; 
      }; 

      function drawRegByHourChart(animate) { 

       $("#regbyhour").remove(); 
       $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>'); 

       var context = $("#regbyhour"); 
       var chart = new Chart(context, { 
        type: 'bar', 
        data: barData 
        // Need to enable or disable animation here based on animate parameter 
       }); 
      }; 

      function updateBarChart(animate) { 
       barData = defineBarDataArray(); 
       barData.labels.push("12:00 PM"); 
       barData.labels.push("1:00 PM"); 
       barData.labels.push("2:00 PM"); 
       barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000)); 
       barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000)); 
       barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000)); 
       drawRegByHourChart(animate); 
      }; 
     </script> 

私はあなたとあなたができるようなアニメーションオプションを指定することができますと言うドキュメントhereには何も表示されません円グラフ。私は何が欠けていますか?

答えて

0

私はここで応答が得られなかったので、chart.js GitHubページのバグとして投稿しました。これに

function drawRegByHourChart(animate) { 

      $("#regbyhour").remove(); 
      $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>'); 

      var context = $("#regbyhour"); 
      var chart = new Chart(context, { 
       type: 'bar', 
       data: barData 
       // Need to enable or disable animation here based on animate parameter 
      }); 
     }; 

:etimbergからの提案に続いて、私はこのことからdrawRegByHourChart機能を変更

function drawRegByHourChart(animate) { 

     $("#regbyhour").remove(); 
     $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>'); 

     var context = $("#regbyhour"); 
     var chart = new Chart(context, { 
      type: 'bar', 
      data: barData 
     }); 
     if (!animate) { 
      chart.update(0); 
     } 
    }; 
関連する問題