グラフjs - 境界線内の線の境界線を切り捨てる線図

Question

境界内の線の境界線で境界線がどのように境界を切っているか驚いた。 [1月、2月]に[2月、3月]と同じ境界があると思います。 私はチャートjsがダニとスケール（例えばafterBuildTicks）のためにいくつかのコールバックを提供していることを知っています、そして、私はこのイベントを購読し、チャートティックスの配列を変更することができました。しかし、私はそれがオーバーヘッドだと思う。 どのようにすれば簡単にできますか？

JSFiddle：同じhttps://jsfiddle.net/yoax05yx/

var canvas = document.getElementById('myChart'); 
enter code here var data = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [ 
    { 
     data: [0, 0, 20, 0, 0, 100, 100], 
     fill: false, 
    } 
]}; 
var myBarChart = Chart.Line(canvas,{ 
data:data, options:{}}); 

、データのみ：https://jsfiddle.net/muz639kL/1/

Answer 1

Chart.jsは、自動サイズ変更スケールのかなり良い仕事をしていませんし、ダニのステップサイズと間隔のための最良の構成を考え出しますしかし、それは必ずしも完全ではありません。あなたの例では、x軸と上のグリッド線の上に直接置かれているデータポイントがあるので、線が途切れるように見えます。

これが発生した場合は、スケール定義を明示的に指定する必要があります。この場合、目盛りがデータポイントを超えて伸びるように目盛りをminとmaxに設定して、線のクリッピングを防ぐことができます。

ここは例です。

var myBarChart = Chart.Line(canvas, { 
    data: data, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      min: -20, 
      max: 140 
     } 
     }] 
    } 
    } 
}); 

私はあなたの特定の例でどのように見えるかを示すjsfiddleをフォークしました。ここにはupdated versionがあります。