맨위로가기
 

SBCHART

닫기

axis.x.tick

#2.0.0

X축 Tick의 개수와 라벨 등을 지정합니다.

  • Type : Object
  • Format
    axis: {
      x: {
          tick: {
              count: 5,
              fit: false,
              values: [2, 4, 10],
              outer: true,
              rotate: 0,
              multiline: true,
              centered: false,
              noUsePadding: false,
              culling: {
                  max: 5
              },
              line: {
                  show: false
              },
              text: {
                  show: false
              }
          }
      }
    }
    

axis.x.tick.count

#2.0.0

X축에 표시할 Tick의 개수를 지정합니다.
2 이하의 값은 유효하지 않으므로 3 이상의 값을 입력합니다.

  • Type: Number

axis.x.tick.fit

#2.0.0

X축 Tick이 알맞게 배치됩니다.
예를 들어 값이 false는 X축의 값에 따라 배치되지만, “true” 로 지정한 경우는 nice하게 배치됩니다.

  • Type: Boolean
  • Default: true

axis.x.tick.values

#2.0.0

X축에서 해당 값을 가진 Tick만 표시됩니다.

  • Type: Any[]

axis.x.tick.outer

#2.0.0

X축 좌우측 끝 부분에 Tick을 표시합니다.
axis.x.type = "categories" 인 경우는 X축 마지막 Tick과 동일한 위치에 중복되어 표시됩니다.

  • Type: Boolean
  • Default: true

axis.x.tick.rotate

#2.0.0

X축 Tick을 주어진 각도로 회전합니다.

  • Type: Number
  • Default: 0

axis.x.tick.multiline

#2.0.0

X축 Tick의 멀티라인 여부를 허용합니다.
axis.rotated == false 일 때(세로 그래프)만 허용합니다.

  • Type: Boolean
  • Default: true

axis.x.tick.width

#2.0.0

X축 Tick이 멀티라인 일 때, Tick의 너비를 지정합니다.
axis.x.type = "category"이고 axis.x.tick.multiline = true (Default) 일 때만 허용합니다.

  • Type: Number

axis.x.tick.centered

#2.0.0

X축 Tick이 영역의 가운데 위치하도록 합니다.
axis.x.type == "category" 인 경우만 유효합니다.
X축의 Tick은 n번째와 n+1번째 영역 구분선에 위치하지만(그리드 선과 동일한 위치) X축 형태가 “카테고리”인 경우는 Tick 위치를 가운데로 변경 가능합니다.

  • Type: Boolean
  • Default: false

axis.x.tick.noUsePadding

#2.0.76

X축 Tick에 X축 min/max값 설정시 여유값을 이용할지 말지를 설정합니다.(default : false).
X축 min/max값이 설정되어 있어야 합니다. (plot차트에서 사용가능)

  • Type: Boolean
  • Default: false

axis.x.tick.format

#2.0.0

X축 Tick에 표시할 문자/숫자를 정의할 사용자 함수를 지정합니다.
파라미터로 X축 값을 넘겨받고 Tick에 표시할 문자/숫자를 리턴하는 함수를 지정합니다.
axis.x.type = "timeseries" 인 경우 “%Y/%m/%d” 와 같이 포맷 문자열을 지정할 수 있습니다.

  • Type : Any
  • Parameter
    • index : Tick 순번입니다. 0부터 시작합니다.
    • value : Tick 값입니다.
      • axis.x.type = "indexed" 인 경우는 Tick 순번
      • axis.x.type = "category" 인 경우는 카테고리명
      • axis.x.type = "timeseries" 인 경우는 Date 값
  • 일반적
    axis: {
      x: {
          tick: {
              count: 5,
              fit: false,
              values: [2, 4, 10],
              outer: true,
              rotate: 0,
              multiline: true,
              centered: false,
              culling: {
                  max: 5
              },
              line: {
                  show: false
              },
              text: {
                  show: false
              }
          }
      }
    }
    
  • axis.x.type = "category" 인 경우 아래와 같이 두 번째 파라미터를 사용할 수 있습니다.
    axis: {
      x: {
          tick: {
              format: function(index, value) {
                  var m = value.substring(5, 7);
                  return (index == 0 || m == "01") ? value : m;
              }
          }
      }
    }
    
  • axis.x.type = "timeseries" 인 경우 아래와 같이 사용 가능합니다.
    • 포맷 Syntax는 D3.format을 참조하세요
      axis: {
        x: {
            tick: {
                format: "%Y-%m-%d %H:%M:%S"
            }
        }
      }
      

axis.x.tick.culling.max

#2.0.21

X축 Tick의 Text의 max값을 지정할 수 있습니다. (max값이기 때문에 지정한 수보다 적게 나올 수 있습니다.)

  • Type: Number

axis.x.tick.line.show

#2.0.21

X축 Tick의 Line의 노출 여부를 설정합니다.

  • Type: Boolean
  • Default: true

axis.x.tick.text.show

#2.0.21

X축 Tick의 Text의 노출 여부를 설정합니다.

  • Type: Boolean
  • Default: true

axis.x.tick.image.imagW

#2.0.115

모든 tick에서 사용되는 이미지의 width를 설정합니다.

  • Type: Number
  • Default: 24

axis.x.tick.image.imagH

#2.0.115

모든 tick에서 사용되는 이미지의 height를 설정합니다.

  • Type: Number
  • Default: 16

axis.x.tick.image.paddingTop

#2.0.115

모든 이미지의 top에 대한 padding값을 설정합니다.

  • Type: Number
  • Default: 5

axis.x.tick.image.paddingSide

#2.0.115

모든 이미지의 위치를 지정합니다.(left, right, center 3가지 지원)

  • Type: Number
  • Default: 5

axis.x.tick.image.imgJson

#2.0.115

tick에서 보일 이미지에 대한 값를 설정합니다.

  • Type: Number
  • Json의 기본구조
      • src(필수) : 그릴 이미지의 위치를 정의한다.
      • moveX : 이미지의 위치를 x축으로 값만큼 이동시킵니다.(px단위이며) - 값은 왼쪽으로, + 값은 오른쪽으로 이동합니다.
      • moveY : 이미지의 위치를 y축으로 값만큼 이동시킵니다.(px단위이며) - 값은 위쪽으로, + 값은 아래쪽으로 이동합니다.
      • location : 해당 이미지에 대한 location을 따로 지정하고자 할때 설정할 수 있습니다. ("left", right", center")
      • imgW : 해당 이미지에 대한 넓이를 따로 지정하고자 할때 설정할 수 있습니다. (pixel 단위)
      • imgH : 해당 이미지에 대한 높이를 따로 지정하고자 할때 설정할 수 있습니다. (pixel 단위)

axis.x.tick.text.useSelectionColorByClick

#2.0.153

tick label을 click시에 스타일을 주어서 색을 바꿀수 있도록 설정합니다.

  • Type: String
  • Default: undefiend