2017-07-19 18 views
2

棒グラフでY軸を計算するためにChart.js 2.6+が使用する数学的論理を誰にでも教えてもらえますか?膨大な量の列を持つ棒グラフをページングするためのページ機能を作成しました。チャートのデータセットが変更されたときにY軸を一定に保つ必要があることを除けば、素晴らしいことです。Chart.js - 棒グラフでY軸をどのように計算するのですか?

このために、私はチャートのデータをとり、その最初の20レコードなどのサブセットを作成し、データオブジェクトとしてチャートに供給します。 Y軸を固定するには、フルデータセットの中で最大の値をとり、maxの値をyAxesオブジェクトのticksに入力します(下の図を参照)。

yAxes: [{ 
    ticks: { 
      max:value_i_determine_here 
    } 
}] 

これはうまくいきますが、Chart.jsがステップをあまりにも緊密に作成して、下のようなチャートになることがあるためです。

enter image description here

あなたが見ることができるように、私は最大値としてそれを供給していますので、トップ値は1,900,000です。しかし、Chart.jsが使用すべきであると判断された値に関して私が最大値を与える必要があります。

私の質問は、Chart.jsがどのような値をY軸に使用するのかを計算する方法です。私がこのロジックを知っていれば、そのロジックを使って私のフルデータセットに基づいて最大値を取得し、THAT値を最大値として供給します。

+0

200Kのステップがかかるようですが、それでも最大yAxis値を表します。最大値が180,001であればさらに悪い結果になると思います。 – lilezek

答えて

0

私がやったことは、私のフルデータセットの最大値をとり、Y軸maxTicksLimit属性に供給する値で除算する関数を書くことでした。次に、次のような複雑なif/else if条件でこの値を実行します。

次に返されるものをstepとして使用し、それをグラフのY軸のstepSize属性として使用します。かなりうまくいくように見えます。誰かがより良い解決策を持っていれば、私はハードコーディングされた計算に基づいているので、私に知らせてください。私はよりダイナミックなアプローチを好むでしょう。

var determineStepSize = function(maxDatasetValue) { 
    var maxStepTemp = Math.ceil(maxDatasetValue/maxYAxisTicks); 
    // Determine what the step should be based on the maxStepTemp value 
    if (maxStepTemp > 4000000) step = 8000000; 
    else if (maxStepTemp > 2000000) step = 4000000; 
    else if (maxStepTemp > 1000000) step = 2000000; 
    else if (maxStepTemp > 500000) step = 1000000; 
    else if (maxStepTemp > 250000) step = 500000; 
    else if (maxStepTemp > 100000) step = 200000;   
    else if (maxStepTemp > 50000) step = 100000; 
    else if (maxStepTemp > 25000) step = 50000; 
    else if (maxStepTemp > 10000) step = 20000; 
    else if (maxStepTemp > 5000) step = 10000; 
    else if (maxStepTemp > 2500) step = 5000; 
    else if (maxStepTemp > 1000) step = 2000; 
    else if (maxStepTemp > 500) step = 1000; 
    else step = 500;     
    return step; 
}; 
関連する問題