Chartjs x軸のアニメーション

Question

chartjs線チャートを使用してデータポイントを視覚化したいと考えています。 Chartjsはデフォルトでグラフをアニメーション表示しているようですが、x軸の値はアニメートされません。 x軸は離散的なステップで移動するだけです。

アニメーションを軸でも有効にする方法はありますか？

ありがとうございます！

Answer 1

私の知る限り、ChartJSは、アウトオブボックスのx軸のアニメーションをサポートしていません。だからあなたはそれをハックする必要があります。おそらくこれを行うにはいくつかの方法がありますが、以下の方法が有効です。

あなたはX軸

上のデータをアニメーション化する場合は、チャートが更新されると、次の手順が発生します。1）軸が描かれ、その後、2）draw()関数がにと呼ばれていますデータを描画します。さまざまな種類のグラフに対して異なるdraw()関数があり、折れ線グラフの関数はChart.controllers.line.prototype.drawです。 draw()関数は1つの引数を取ります。これは、animationFractionと呼びます。これは、アニメーションがどれほど完全であるかを示すものです。たとえば、アニメーションが5％完了した場合、animationFractionは0.05になり、アニメーションが100％完了した場合（つまり、チャートが最終形式の場合）animationFraction=1となります。 draw()関数は、アニメーションの各ステップで呼び出され、データ表示を更新します。 x軸をアニメーション化する

一つハックは、その後サルパッチ毎に水平方向にキャンバスを翻訳する線グラフdraw()関数であるステップを描く：

var hShift = (1-animationFraction)*ctx.canvas.width; 

hShiftは、ピクセル単位での水平シフトでありますグラフの上で定義したように、データは右から掃引されます。あなたがそれを左から掃引したいなら、あなたは上記を否定することができます。あなたは正しい場所に描画され、キャンバスのコンテキスト状態を保存hShiftを使ってキャンバスを変換し、グラフのデータを描画した後、次のアニメーションに軸をフレームように、元の状態にキャンバスを復元：

ctx.save(); 
ctx.setTransform(1, 0, 0, 1, hShift, 0); 
ctx.oldDraw.call(this, animationFraction); 
ctx.restore(); 

var oldDraw = Chart.controllers.line.prototype.draw; 

あなたはさらにセットアップ新しいdraw()機能できるように新しいアニメーションオプションを読み込むことができます：thisがチャートオブジェクトを参照し、oldDrawは、以前に保存されたオリジナルの折れ線グラフの描画機能を指し、上記で

、あなたは、えー、x軸とy軸はアニメ化されています

var oldDraw = Chart.controllers.line.prototype.draw; 
Chart.controllers.line.prototype.draw = function(animationFraction) { 
    var animationConfig = this.chart.options.animation; 
    if (animationConfig.xAxis === true) { 
     var ctx = this.chart.chart.ctx; 
     var hShift = (1-animationFraction)*ctx.canvas.width; 
     ctx.save(); 
     ctx.setTransform(1, 0, 0, 1, hShift,0); 
     if (animationConfig.yAxis === true) { 
      oldDraw.call(this, animationFraction); 
     } else { 
      oldDraw.call(this, 1); 
     } 
     ctx.restore(); 
    } else if (animationConfig.yAxis === true) { 
     oldDraw.call(this, animationFraction); 
    } else { 
     oldDraw.call(this, 1); 
    } 
} 

あなたは、その後でアニメーションの両方の軸を持つ折れ線グラフを作成することができます。

var lineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
     animation: { 
      duration: 5000, 
      xAxis: true, 
      yAxis: true, 
     } 
    } 
}); 

はデモ用のhttps://jsfiddle.net/16L8sk2p/を参照してください。

あなたは、x軸の制限をアニメーション化する場合は、X軸は

を制限しアニメーション化する場合 - すなわち。データ、軸のティック、および目盛のラベルを移動すると、次の戦略を使用できます。ちょっと風変わりなので、特定のユースケースで問題を解決するには多少の努力が必要かもしれませんが、一般的にはうまくいくはずです。まず、線図を散布図に変換する必要があります。折れ線グラフには段階的に移動するカテゴリx軸があるため、アニメーションを取得するためには軸の限界をティックの間に設定することはできません。したがって、散布図には任意の軸の制限があるため、代わりに線散布図を使用する必要があります。各データポイントに番号を付け、そのデータポイントのx値にその番号を割り当てることで、これを行うことができます。例えば、ランダムなデータセットを生成するために、あなたができる：

var DATA_POINT_NUM = 58; 
var data = { 
    labels: [], 
    datasets: [ 
     { 
      data: [], 
     }, 
    ] 
} 
for (var i=0; i<DATA_POINT_NUM; i++) { 
    data.datasets[0].data.push({ x: i, 
            y: Math.random()*10 
           }); 
    data.labels.push(String.fromCharCode(65+i)); 
} 

あなたは、あなたのデータポイントの割り当てられたx値、およびデータポイントラベルの間で変換する関数を記述する必要があります（つまり、グラフのx軸に表示されるカテゴリ）：

function getXAxisLabel(value) { 
    try { 
     var xMin = lineChart.options.scales.xAxes[0].ticks.min; 
    } catch(e) { 
     var xMin = undefined; 
    } 
    if (xMin === value) { 
     return ''; 
    } else { 
     return data.labels[value]; 
    } 
} 

ここで、lineChartはChartオブジェクトです（以下で定義します）。 ChartJSは、x軸の最小値にラベルがある場合は、グラフをわずかに描画するので、x軸の最小値==の場合は空の文字列を返すようにこの関数を記述する必要があります。その後、Chartオブジェクトを定義することができます。

var lineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
     animation: false, 
     scales: { 
      xAxes: [{ 
       type: 'linear', 
       position: 'bottom', 
       ticks: { 
        min: 0, 
        max: 10, 
        callback: getXAxisLabel, // function(value) { return data.labels[value]; }, 
        autoSkip: false, 
        maxRotation: 0, 

       }, 
      }] 
     } 
    } 
}); 

ticks.callbackは、上記の私たちのgetXAxisLabel機能に設定されています。 ChartJSがx軸を描くと、データポイントのx値がコールバック関数に渡され、結果の文字列がx軸の値として使用されます。このようにして、折れ線グラフのような散布図を描くことができます。 autoSkip=falseとmaxRotation=0も設定して、軸ラベルが一貫した方法で描画されるようにしました。

x軸ticks.minとticks.maxの値を調整し、グラフの.update()メソッドを呼び出すことによって、グラフをアニメートできます。これを説明するために、以下のコードはチャートX軸に沿ってスキャンし、一度に10データポイントを示します。

var xMin = 0;     // Starting minimum value for the x-axis 
var xLength = 10;    // Length of the x-axis 
var animationDuration = 5000; // Duration of animation in ms 

// Calculate animation properties 
var framesPerSec = 100; 
var frameTime = 1000/framesPerSec; 
var xStep = (DATA_POINT_NUM-xMin+xLength)/(animationDuration/1000*framesPerSec); 

function nextFrame() { 
    var xMax = xMin+xLength; 
    if (xMax < DATA_POINT_NUM-1) { 

     if (xMax+xStep > DATA_POINT_NUM-1) { 
      xMax = DATA_POINT_NUM-1; 
      xMin = xMax-xLength; 
     } 
     lineChart.options.scales.xAxes[0].ticks.min = xMin; 
     lineChart.options.scales.xAxes[0].ticks.max = xMax; 
     lineChart.update(); 
     setTimeout(nextFrame, frameTime); 
     xMin += 0.1; 
    } 
} 

nextFrame(); 

すべて一緒にそれを置く：https://jsfiddle.net/qLhojncy/あなたがまたはあなたがx軸にラベルをアニメーション意味ならば、CTGは下記行っているように、X-次元でグラフデータをアニメーション化について尋ねられたかどうか、それははっきりしていない

Answer 2

私はJavaScriptの専門家ではありませんが、新しいデータポイントを挿入すると、アニメーションを介してx軸を更新するChartjsの例が見つかりました。おそらくそれはあなたに役立ちます：example。

例ソース：sitepoint.com