2017-06-27 2 views
0

html5キャンバスに少し問題があります。私はいくつかの折れ線グラフを作成しましたが、最大のグリッド値(キャンバス自体内のフィールドの種類の一種)に問題があります。チャートは、データベースからのデータセットから構築されており、これらの値のみを使用しています。既存のデータセット値にキャンバス制限を設定する

例:あなたがここに見ることができるようにサンプルチャート

sample chart

は、上記制限が5.55である、との質問はの割合を使用して、例えば(より大きな値にそれを変更する方法ですそのような最大値か何か他のチャートのオフセットも一致するように)?

コード:

$('#graf_' + i + '').html('<canvas id="lineChart' + i + '" width="' + $(".graf").width() + '" height="200"></canvas>'); 

var lineData = { 
    labels: data["headers"], 
    datasets: [{ 
     label: data["rates"][i]["VltName"], 
     fillColor: "transparent", 
     strokeColor: data["rates"][i]["VltColor"], 
     pointColor: data["rates"][i]["VltColor"], 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data: getRatesArr 
    }] 
}; 
var lineOptions = { 
    scaleShowGridLines: true, 
    scaleGridLineColor: "rgba(0,0,0,.05)", 
    scaleGridLineWidth: 1, 
    bezierCurve: false, 
    pointDot: true, 
    pointDotRadius: 4, 
    pointDotStrokeWidth: 1, 
    pointHitDetectionRadius: 20, 
    datasetStroke: true, 
    datasetStrokeWidth: 2, 
    datasetFill: true 
}; 


var ctx = document.getElementById("lineChart" + i).getContext("2d"); 
var myNewChart = new Chart(ctx).Line(lineData, lineOptions); 

は私の説明があまりにも漠然とではありません願っています。前もって感謝します!

答えて

0

最新Chart.jsバージョン(現在はv2.6.0)に更新した場合、あなたは軸に表示する最大数を設定するmaxダニの設定オプションを使用することができます。

options: { 
    scales: { 
     yAxes: [{ 
      ticks: { 
       max: yourMaxNum 
      } 
     }] 
    } 
} 

設定したい場合yourMaxNumをすべてのデータセット配列の中で最大の数値に設定するには、単にJavaScript Math.max()メソッドを使用してこの数値を決定し、すべての折れ線グラフを作成するときに上記のチャート設定オプションをこの数値に設定します。

Chart.js documentationには、役に立つかもしれない追加のティック構成オプションが記載されています。

関連する問題