Chart.js：定義された線よりも細い線が表示される

Question

私は直線で単純な線図を作成しましたが、その線が上下の水平グリッド線に沿って走っていれば、定義された線より細く表示されます。グリッド線が隠れていても。

https://i.stack.imgur.com/rD58f.png

マイコード：

window.onload = function() { 

    var config = { 
     type: "line", 
     data: { 
      labels: ["Jan", "Feb", "Mar","Jun","Jul","Aug","Sep", "Oct", "Nov"], 
      datasets: [ { 
       backgroundColor: "#ff0000", 
       borderColor: "#ff0000", 
       fill: false, 
       borderWidth: 2, 
       lineTension: 0, 
       data: [0, 0, 0, 1, 6, 8, 8, 8, 8] 
      }] 
     }, 
     options: { 
      responsive: true, 
      scales: { 
       xAxes: [{ 
        gridLines: { display: false } 
       }], 
       yAxes: [{ 
        gridLines: { display: false } 
       }] 
      }, 
      legend: { 
       display: false 
      } 
     } 
    };   

    var ctx = document.getElementById("canvas").getContext("2d"); 
    var chart = new Chart(ctx, config); 
} 

どのように私はこの問題を解決することができますか？

Answer 1

私はlitteビットを試しました。しかし、私が実際に働いていた唯一の解決策は、chartjのキャンバスヘルパーにスペースを追加することでした。あなたは、次のコードをアプリケーションに追加することでこれを実現することができます

var WIDE_CLIP = {top: 2, bottom: 4}; 

Chart.canvasHelpers.clipArea = function(ctx, clipArea) { 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.rect(
     clipArea.left, 
     clipArea.top - WIDE_CLIP.top, 
     clipArea.right - clipArea.left, 
     clipArea.bottom - clipArea.top + WIDE_CLIP.bottom 
    ); 
    ctx.clip(); 
} 

これを見てみましょう：https://stackoverflow.com/a/46303679/4032712

私はパディングと位置オプションを使用しようとしましたが、のどれもがあなたの問題のために動いていないようにみえ。私はこれであなたを助けてくれることを願っています！