Chart.jsパディングキャンバス

Question

最新のchart.jsライブラリを使用して縮尺のない折れ線グラフを生成していますが、パディングの問題があり、上下の点が途切れています。キャンバスをパディングするオプションが表示されませんでした。

私の設定は以下のようなものです。

var config = { 
    type: 'line', 
    data: { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: "Sales", 
      data: [10, 20, 50, 25, 60, 12, 48], 
      fill: true, 
      lineTension: 0.25, 
      borderColor: "#558aeb", 
      backgroundColor: "#558aeb" 
     }] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      mode: 'label' 
     }, 
     hover: { 
      mode: 'dataset' 
     }, 
     scales: { 
      xAxes: [{ 
       display: false 
      }], 
      yAxes: [{ 
       display: false 
      }] 
     } 
    } 
}; 

Answer 1

あなたの問題はパディングではないと私は信じていますが、間違っている可能性があります。私が見ているように、あなたの問題は、データの最大数が60のように素敵でラウンドであるときに、描画可能領域の高さの自動検出です。最大数が61,62などのときに問題が続くかどうかを確認してください。そのような問題が発生しないように、データを調理することをお勧めします。データ調理がオプションでない場合、y軸に最大目盛りを明示的に定義して、データの最大数を少し上回るようにしてください。あなたのケースでは、これを使用してみてください：

yAxes: [{ 
    display: false, 
    ticks: { 
     max: 62 
    } 
}] 

だからあなたはデータの最大数を計算し、明示的に予想外のトリミングを取り払うする最大目盛りを定義するために、小さな何かを追加する必要があります。誰かがより良い理解と解決策を持つことができますが、それは私が考えることができるオプションです。それはもちろん、あなたのデータを調理すること。

Answer 2

私はそれを解決するための修正プログラムを作成する方法を調査しました。例えば、重いの変更がある場合

1 - データブレーク：

[0, 10, 70, 30, 20, 12, 50, 200, 200, 200, 200, 200] 

2 - 「エラー」は常に我々のborderWidthの高さの半分である私は3つの奇妙な行動を見ました。私たちは、私はコアの機能「更新」内の2奇妙なパディングVARSを見た第二に

次のコミットにcore.layoutService.jsのライン36を変更したとき

、3-そのエラー

を導入したことがあります。 layoutService：

29行目には関数があり、35行目と36行目には奇妙なバールがあります。

// The most important function 
     update: function(chartInstance, width, height) { 
      if (!chartInstance) { 
       return; 
      } 

      var xPadding = 0; 
      var yPadding = 0; 

特に、yPaddingを使用して、関数がvarsでどのように機能しているかがわかりました。私はyPaddingで何か役に立つ計算をすることができませんでした。私の意見ではここに問題があります。私たちは常にyPaddingを0に維持し、IMHOはそのファイルの別のバージョンで適用されたエラーです。

解決策は次のとおりです。そのコミットの開発者の背後にある要求が削除されているため、ソリューションを開発しました。 HOTFIX'S

、私はPRを行いますし、それが承認された場合、あなたはあなた場合は、また、チャートのスタイルの設定であなたのパディングを設定することができますそのコードを適用した場合に、解

BE WILLどんな設定も適用しないでください。彼はチャートの高さに基づいてデフォルトを取るでしょう。

コンフィグ小道具例：

padding: { 
    x: 5, 
    y: 4 
}, 

あなたがコードやここにすべての説明があります：チャートの https://github.com/chartjs/Chart.js/pull/3349

Answer 3

私は質問が正しい理解場合は、現在のバージョン（> 2.4）をJSは、パディングの設定をサポートしていますチャートレイアウトについてのオプション。トップカットオフを解決

layout: { 
    padding: { 
     // Any unspecified dimensions are assumed to be 0      
     top: 25 
    } 
} 

Check here