그림.js v2 - 격자선 숨기기

그림.js v2 - 격자선 숨기기

간단한 꺽은선형 차트를 그리기 위해 Chart.js v2를 사용하고 있습니다.원하지 않는 그리드 선이 있다는 것만 빼면 모든 것이 정상입니다.

https://nnnick.github.io/Chart.js/docs-v2/ #line-chart에 대한 설명서는 여기 있지만 "Grid Lines"를 숨기는 방법은 찾을 수 없습니다.

그리드 선을 제거하려면 어떻게 해야 합니까?

꺽은선형 차트에서 그리드 선을 숨기는 데 도움이 되는 솔루션을 찾았습니다.

설정gridLinesdiv의 배경색과 같은 색이어야 합니다.

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

버전 3.x 이후에는 이 구문을 사용합니다.다음 chart.display 이행가이드를 참조해 주세요.https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

scales: {
  x: {
    grid: {
      display: false
    }
  },
  y: {
    grid: {
      display: false
    }
  }
}

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

디폴트로 소거하는 경우는, 다음과 같이 설정할 수 있습니다.

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

격자선을 숨기지만 yAx를 표시하려면 다음을 설정할 수 있습니다.

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

알았어, 신경 쓰지 마.요령을 찾았다.

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

아래 코드는 x&y 축 레이블에 있는 선이 아닌 차트 영역에서 그리드 선을 제거합니다.

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

chartjs 3에서는 이 설정에 액세스 할 때 약간의 차이가 있습니다.속성 이름이 아닙니다.gridLines,그렇지만grid공식 매뉴얼에 기재되어 있는 바와 같이 다음과 같습니다.

options.gridLines로 이름이 변경되었습니다.options.grid

출처 : https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks

그 외관은 다음과 같습니다.

const options = {
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
  },
};

다음의 공식 문서를 참조해 주세요.

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

아래의 코드를 변경하면 그리드가 숨겨집니다.라인:

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

ChartJS 3 업데이트:

  const options = {
    scales: {
      x: {
        grid: {
          display: false,
        },
      },

      y: {
        grid: {
          // display: false,
          color: 'rgba(217,143,7,0.1)',
        },
      },
    },
}

언급URL : https://stackoverflow.com/questions/36676263/chart-js-v2-hiding-grid-lines