Chart.js v2-격자 선 숨기기


149

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

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

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

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

답변:


341

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

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
            }   
        }]
    }
}

2
실제로 gridLines 색상을 0 opacity검은 색 (투명한 색상)으로 설정합니다. 따라서 이것은 div의 배경색에 관계없이 작동합니다.
XCS

40
또는 "color"대신 display : false를 사용하십시오
Irvine

4
대단히 감사합니다! 이 주제에 대한 문서 만 조금 더 명확하다면. :)
iSS

나는 스케일을 유지하고 싶지만 차트 뒷면의 눈금 선을 잃어 버리기 때문에이 대답은 효과가 없었습니다.
adg

1
이 첫 번째 답변은 원하는 그림을 얻을 수 있지만 약간의 해킹입니다. 실제로 gridLines 표시 속성을 false로 설정하는 두 번째 솔루션이 더 정확한 것 같습니다.
Tot Zam

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

5
이 답변을 통해 축척을 유지할 수 있었지만 차트에 눈금 선을 그리지 않았습니다.
adg

19

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

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

12

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

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

8

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

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

4

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

Chart.defaults.scale.gridLines.drawOnChartArea = false;
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.