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

나는 리트 비트를 시도했다. 그러나 내가 실제로 발견 한 유일한 해결책은 chartjs의 캔버스 도우미로 공간을 추가하는 것이 었습니다. https://stackoverflow.com/a/46303679/4032712

나는 패딩 및 위치 옵션을 사용하려하지만 아무도이 문제에 대해 작동하는 것 같다 없습니다 :

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(); 
} 

이 한 번 봐 : 당신은 당신의 응용 프로그램에 다음 코드를 추가하여이 작업을 수행 할 수 있습니다 . 나는 이것으로 당신을 도울 수 있기를 희망한다!