Chartkick.js를 사용하여 축을 숨기는 방법

Chartkick.js를 사용하여 축을 숨기는 방법

Vue 차트를 그리기 위해 https://github.com/ankane/vue-chartkick을 사용하고 있는데, 문서에는 축을 숨기는 방법이 적혀 있지 않은 것 같습니다.

이 도서관에서 어떻게 하는지 아는 사람 있어요?

잘 부탁드립니다.

차트 구성 요소에는 차트 옵션을 사용자 지정할 수 있는 라이브러리 속성이 있습니다.꺽은선형 차트의 x축을 숨기거나 제거하려면 다음과 같이 하십시오.

<line-chart :data="lineData" :library="chartOptions">

...그리고 당신의 구성 요소에는...

data () {
  return {
    lineData: [
      {name: 'Line A', data: {'1': 3, '2': 4, '3': 2, '4': 1}},
      {name: 'Line B', data: {'1': 2, '2': 3, '3': 4, '4': 1}}
    ],
    chartOptions: {
      layout: {
        padding: {left: 10, right: 5, top: 5, bottom: 2}
      },
      scales: {
        xAxes: [{
          display: false // this hides the x-axis
        }]
      }
    }
  }
}

x축을 숨기고 있기 때문에 레이아웃 패딩을 조정할 수 있습니다(위 그림 참조).

콜백이 null을 반환하도록 xAxes의 틱 속성을 조작할 수도 있지만, 그래도 공간이 너무 많이 남을 수 있습니다.

언급URL : https://stackoverflow.com/questions/49974479/how-to-hide-axis-using-chartkick-js