[javascript] Chart.js v2-격자 선 숨기기

Program / 글쓴이

Chart.js v2를 사용하여 간단한 꺾은 선형 차트를 그립니다. 내가 원하지 않는 그리드 선을 제외하고는 모든 것이 잘 보입니다.

내가 원하지 않는 그리드 라인

꺾은 선형 차트에 대한 설명서는 여기 ( https://nnnick.github.io/Chart.js/docs-v2/#line-chart )이지만 “그리드 선”을 숨기는 방법을 찾을 수 없습니다.

격자 선을 어떻게 제거합니까?

답변

꺾은 선형 차트에서 눈금 선을 숨기는 데 도움이되는 솔루션을 찾았습니다.

gridLines색상을 div의 배경색과 동일하게 설정하십시오 .

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }]
    }
}

또는 사용 

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }
        }]
    }
}

답변

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

답변

기본적으로 사라지게하려면 다음을 설정할 수 있습니다.

Chart.defaults.scale.gridLines.display = false;

답변

눈금 선을 숨기고 yAxes를 표시하려는 경우 다음을 설정할 수 있습니다.

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

답변

알았어, 신경 쓰지 마 .. 트릭을 찾았 어. 

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

답변

아래 코드는 x & y 축 레이블의 것이 아닌 차트 영역에서 눈금 선을 제거합니다.

Chart.defaults.scale.gridLines.drawOnChartArea = false;

답변