私は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には何も表示されません円グラフ。私は何が欠けていますか?