API
PictorialBarSeriesOptions

PictorialBarSeriesOptions extends BarSeriesBaseOptions

PictorialBarSeriesOptions의 기능을 사용하기 위해서는 'pictogram'모듈이 필요하다. 자세한 설명은 guide/modules에서 확인할 수 있다.


pictorial bar 시리즈.
type'pictorialbar'이다.
데이터포인트 bar 위에 svg나 이미지로 데이터포인트와 관련된 그림(figure)을 표시한다.

Options

baseValue: number (opens in a new tab)

데이터포인트를 표시하기 위한 y축 기준 위치 값.
그룹에 포함된 경우 먼저 그룹의 baseValue를 따른다. 또, 이 값을 지정하지 않은 경우 연결된 y축의 config.axis.baseValue를 따르고, 그 값도 설정되지 않은 경우 0이 적용된다. NaN으로 지정하면 기준값 없이 최소값과 축의 padding으로 기준 위치가 정해진다.

default :undefined

belowStyle: SVGStyles | string (opens in a new tab)

baseValue 또는 y축의 baseValue로 지정되는 기준값 보다 작은 쪽의 point들에 적용되는 스타일.

default :undefined

bottomRadius: number (opens in a new tab)

지정한 반지름 크기로 데이터포인트 bar의 아래쪽 모서리를 둥글게 표시한다.
최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.

default :undefined

clusterable: boolean (opens in a new tab)

구분 배치가 가능한 둘 이상의 시리즈나 시리즈그룸이 표시 중일 때 구분 배치할 지 여부.
명시적 false로 지정하지 않는 한 무리 배치한다. 즉, 복수 개의 시리즈나 시리즈그룹의 데이터포인트들이 겹치지 않고 차레대로 표시된다.

default :undefined

color: string (opens in a new tab) | number (opens in a new tab)

데이터 포인트 기본 색.
숫자로 지정하면 정수로 변환된 값에 해당하는 팔레트 색상으로 설정된다. 'var(--color-n)'으로 지정한 것과 동일하며, 1 ~ 12 사이의 값으로 지정한다.
pointColorspointStyleCallback으로 설정된 색상이 이 속성으로 설정한 색상보다 우선한다.

default :undefined

colorByPoint: boolean (opens in a new tab)

true로 지정하면 포인트 bar 별로 색을 다르게 표시한다.

default :false

colorField: string (opens in a new tab) | number (opens in a new tab) | Function (opens in a new tab)

json 객체나 배열로 전달되는 데이터포인트 정보에서 color 값을 지정하는 속성명이나 인덱스 또는, 전달되는 json 객체에서 color 값을 리턴하는 함수.
지정하지 않거나(undefined) 값이 undefined이면, , 데이터포인트의 값이 객체일 때 'color' 속성 값이 사용된다.

default :undefined

data: any (opens in a new tab)

데이터포인터들을 생성하는 데 사용되는 값 목록. 단일 값을 지정할 경우 배열로 처리됩니다. 단, string (opens in a new tab) 타입은 향후 버전에서 사용할 예정이며, 현재는 data를 지정하지 않은 경우와 동일하게 동작한다.

default :undefined

depth: number (opens in a new tab)

깊이가 있는 축에서 깊이 방향(z축)의 데이터포인트 두께.
이 값과 distance을 더한 크기가 body의 깊이를 초과할 수 없다. 즉, body의 깊이가 없으면 이 속성은 무시된다.
이 속성을 설정하지 않으면, group에 포함된 경우 group의 depth를 따르고, 그 값도 설정되지 않으면 기본값 10 픽셀로 적용된다.

default :undefined

distance: number (opens in a new tab)

깊이가 있는 축과 데이터포인트들 사이의 간격.
이 값과 depth를 더한 크기가 body의 깊이를 초과할 수 없다. 즉, body의 깊이가 없으면 이 속성은 무시된다.
group에 포함된 경우 group의 distance와 이 설정값을 더해서 적용된다. 이 속성을 설정하지 않으면 group에 포함된 경우 0, 아니면 5 픽셀로 적용된다. 또, layout이 overlap인 group에 포함된 경우 순서대로 앞쪽으로 표시된다.

default :undefined

figureByPoint: boolean (opens in a new tab)

true로 지정하면 figureImage가 배열인 경우, 데이터포인트 별로 figureField에 지정된 index나, 데이터포인트 index에 따라 자동 지정된다.

default :undefined

figureField: string (opens in a new tab) | number (opens in a new tab) | Function (opens in a new tab)

json 객체나 배열로 전달되는 데이터포인트 정보에서 figure 값을 지정하는 속성명이나 인덱스 또는, 전달되는 json 객체에서 figure 값을 리턴하는 함수.
지정하지 않거나(undefined) 값이 undefined이면, 데이터포인트의 값이 객체일 때 'figure' 속성 값이 사용된다.

default :undefined

figureGap: number (opens in a new tab)

figure와 bar 사이의 간격.

default :0

figureImage: string (opens in a new tab) | Array (opens in a new tab)<string (opens in a new tab)>

figure 이미지 url 또는 url 배열.
데이터포인트 구성 json의 figureField로 지정한 속성에 이미지 index를 지정할 수 있다.

default :undefined

figureImageRoot: string (opens in a new tab)

figureImage 목록이나, figureField로 설정된 모든 이미지 경로 앞에 추가되는 경로.

default :undefined

figurePath: string (opens in a new tab) | Array (opens in a new tab)<string (opens in a new tab)>

svg 단일 path 또는 path 목록.
path 목록이면 모두 합쳐진 path로 그려진다. svg로 figure를 지정하면 데이터포인트의 'fill'이나 'stroke' 스타일을 따라간다.
figureByPoint를 지정해서 데이터포인트별로 svg를 표시하려면 figureImage에 복수 개로 지정한다.

default :undefined

figureWidth: string (opens in a new tab) | number (opens in a new tab)

데이터포인트 bar 너비에 대한 figure의 상대 너비.
1이면 bar 너비와 동일한 크기로 figure의 너비가 표시된다. 0보다 큰 값으로 지정한다. 잘못된 값을 지정하면 1로 표시된다.
이렇게 결정된 너비에 맞게 figure의 높이가 자동 결정된다. figure의 높이가 데이터포인트 높이 보다 크면 bar 부분은 표시되지 않는다.

default :'100%'

hoverEffect: 'none' | 'default'

데이터포인트 위에 마우스 포인터가 올라갈(hovering) 때 표시되는 효과.

default :undefined

hoverStyle: SVGStyles | string (opens in a new tab)

데이터포인트 위에 마우스가 있을 때 적용되는 스타일셋 또는 css selector (opens in a new tab).

default :undefined

iconField: string (opens in a new tab) | number (opens in a new tab) | Function (opens in a new tab)

json 객체나 배열로 전달되는 데이터포인트 정보에서 icon 값을 지정하는 속성명이나 인덱스 또는, 전달되는 json 객체에서 icon 값을 리턴하는 함수.
지정하지 않거나(undefined) 값이 undefined이면, 데이터포인트의 값이 객체일 때 'icon' 속성 값이 사용된다.

default :undefined

interactive: boolean (opens in a new tab)

시리즈의 hover, focus, tooltip 상호작용 여부를 지정한다.

default :true

label: string (opens in a new tab)

이 시리즈를 나타내는 텍스트.
레전드나 툴팁에서 시리즈를 대표한다. 이 속성이 지정되지 않으면 name이 사용된다.

default :undefined

legendKey: string (opens in a new tab)

이 시리즈나 데이터포인트들이 legend에 표시될 때, 이 속성에 해당하는 값이 동일하면 중복 표시되지 않는다.
또, 해당 legend 항목에 대해 이 키로 연결된 모든 시리즈나 데이터포인트들이 반응한다.

default :undefined

loadAnimation: 'default' | 'reveal' | 'grow' | 'spread' | 'fadein'

차트 설정 로드 시 실행되는 animation 종류.

default :undefined

minPointWidth: number (opens in a new tab)

최소 데이터포인트 너비.
polar일 때는 무시된다.

default :1픽셀

mode: 'auto' | 'both' | 'figure'

svg나 이미지 figure와 bar를 표시하는 방식.

  • 'auto' 이미지가 지정되면 'figure', svg가 지정되면 'both'로 적용된다.
  • 'both' 이미지나 svg의 비율을 유지하면서 아래 bar를 같이 표시한다.
  • 'figure' 아래쪽 bar 없이 이미지나 svg를 데이터포인트 높이와 너비에 맞게 비율을 조정해서 표시한다.

default :'auto'

name: string (opens in a new tab)

시리즈 이름.
시리즈 생성시 지정된 후 변경할 수 없다. 차트의 다른 구성 요소에서 이 시리즈를 참조할 때 사용되며, 레전드나 툴팁에서 시리즈를 나타내는 텍스트로도 사용된다.

default :undefined

noClip: boolean (opens in a new tab)

true로 지정하면 body를 벗어난 data point 영역도 표시된다.
값을 지정하지 않으면 polar 차트에서는 true, 직교 차트에서는 false이다. group에 포함되면 group의 noClip 설정을 따른다.
또, 값을 지정하지 않으면 버블시리즈는 최대한 버블들이 표시되도록 한다.

default :undefined

nullAsBase: boolean (opens in a new tab)

null인 y값을 baseValue로 간주한다.

default :fasle

onPointClick: (args: DataPointCallbackArgs) => boolean (opens in a new tab)

데이터 point가 클릭될 때 호출되는 이벤트 콜백.
명시적 true를 리턴하면 기본 동작이 진행되지 않는다.

default :undefined

onPointHover: (args: DataPointCallbackArgs) => void (opens in a new tab)

마우스가 데이터 point 위에 올라가거나 빠져나갈 때 호출되는 이벤트 콜백.
빠져나가는 경우 args 매개변수는 null이다.

default :undefined

onPointsLoaded: (series: object (opens in a new tab), firstTime: boolean (opens in a new tab)) => void (opens in a new tab)

데이터포인트들이 새로 로드된 후 호출된다.

default :undefined

paddingRate: number (opens in a new tab)

연결된 축의 padding을 확장시키는 비율.
설정한 비율 만큼 축의 padding 크기가 확대되어 배치 계산이 이루어진다.

default :1

pointColors: string (opens in a new tab) | Array (opens in a new tab)<string (opens in a new tab)>

데이터 포인트별 색들을 지정한다.
색 배열로 지정하거나, 'colors' asset으로 등록된 이름을 지정할 수 있다.
또, 'palette-name@palette''palette-name@pal' 형식으로 설정해서 라이브러리가 기본 css로 제공하는 palette 색상 배열을 사용할 수 있다.
pointStyleCallback으로 설정된 색상이나 데이터포인트별로 지정한 색상이 이 속성으로 설정한 색상보다 우선한다.

default :undefined

pointLabel: boolean (opens in a new tab) | BasedSeriesLabelOptions

default :undefined

pointOffset: number (opens in a new tab)

데이터포인트가 표시되는 위치를 데이터포인트 너비에 대한 상대값으로 비켜 표시한다..
기본값 0이면 카테고리의 중앙 또는 연속축의 값 위치에 데이터포인트의 중간이 놓이도록 표시한다. -0.5이면 데이터포인트 오른쪽이, 0.5이면 데이터포인트 왼쪽이 기본 위치에 표시된다.

default :0

pointPadding: number (opens in a new tab)

이 시리즈의 point가 차지하는 영역 중에서 point bar 양쪽 끝에 채워지는 빈 영역의 크기.
point가 차지할 원래 크기에 대한 상대 값으로서, 0 ~ 0.5 사이의 비율 값으로 지정한다.

default :undefined한 카테고리에 cluster 가능한 시리즈가 하나만 표시되면 0.25, group에 포함된 경우 0.1, 여러 시리즈와 같이 표시되면 0.2.

pointStyle: SVGStyles | string (opens in a new tab)

모든 데이터포인트에 적용되는 스타일셋 또는 css selector (opens in a new tab).
style로 설정되는 시리즈의 inline 스타일이 데이터포인터에 적용되지 않는 경우 이 속성을 사용할 수 있다. pointColorscolor가 설정되면 이 속성으로 설정된 색상은 무시된다. 또, pointStyleCallback으로 설정된 스타일이 이 속성 스타일보다 우선한다.

default :undefined

pointStyleCallback: (args: DataPointCallbackArgs) => SVGStyles|string (opens in a new tab)

데이터포인트의 동적 스타일 콜백.

default :undefined

pointWidth: number (opens in a new tab)

시리즈가 그룹에 포함되지 않거나, 포함된 그룹의 layout이 DEFAULT이거나 특별히 설정되지 않아서, 그룹에 포함된 시리즈들의 data point가 옆으로 나열되어 표시될 때, 포인트 표시 영역 내에서 이 시리즈의 포인트가 차지하는 영역의 상대 크기.
예를 들어 이 시리즈의 속성값이 1이고 다른 시리즈의 값이 2이면 다른 시리즈의 data point가 두 배 두껍게 표시된다.

default :```ts ```

style: SVGStyles | string (opens in a new tab)

스타일셋 또는 css selector (opens in a new tab).

default :undefined

tooltipCallback: (args: DataPointCallbackArgs) => string (opens in a new tab)

default :undefined

tooltipText: string (opens in a new tab)

데이터포인트 툴팁 텍스트.

default :undefined

topRadius: number (opens in a new tab)

지정한 반지름 크기로 데이터포인트 bar의 위쪽 모서리를 둥글게 표시한다.
최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.

default :undefined

trendline: TrendlineOptions

추세선 옵션.

default :undefined

type: 'pictorialbar'

default :undefined

viewRangeValue: 'x' | 'y' | 'z'

ranges가 적용되는 값.
지정하지 않으면 시리즈 종류에 띠라 자동 적용된다. 'line' 시리즈 계열은 'x', 나머지는 'y'가 된다. 현재 'z'은 range는 bubble 시리즈에만 적용할 수 있다.

default :undefined

viewRanges: ValueRangeList | Array (opens in a new tab)<ValueRange>

값 범위 목록.
범위별로 다른 스타일을 적용할 수 있다. 범위들은 중첩될 수 없다.

default :undefined

visible: boolean (opens in a new tab)

표시 여부.

default :true

visibleInLegend: boolean (opens in a new tab)

명시적 false로 지정하면 legend에 표시하지 않는다.

default :undefined

visibleInNavigator: boolean (opens in a new tab)

true로 지정하면 시리즈 내비게이터에 표시한다. 해당 속성은 bar, line 시리즈 에서만 적용된다.

default :undefined

visibleThreshold: number (opens in a new tab)

포인터가 차지하는 너비가 이 값 미만이면 표시하지 않는다.

default :undefined

xAxis: string (opens in a new tab) | number (opens in a new tab)

그룹에 포함되면 그룹 설정을 따른다.

default :undefined

xField: string (opens in a new tab) | number (opens in a new tab) | Function (opens in a new tab)

json 객체나 배열로 전달되는 데이터포인트 정보에서 x 값을 지정하는 속성명이나 인덱스 또는, 전달되는 json 객체에서 x 값을 리턴하는 함수.
지정하지 않거나(undefined) 값이 undefined이면, , 데이터포인트의 값이 array일 때는 0, 객체이면 'x' 속성 값이 사용된다..

default :undefined

xStart: any (opens in a new tab)

연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 첫번째 데이터 point에 설정되는 x값.
이 후에는 xStep씩 증가시키면서 설정한다. 이 속성이 지정되지 않은 경우 xStart가 적용되는데 log축이면 1, 아니면 0이다.

default :undefined

xStep: string (opens in a new tab) | number (opens in a new tab)

연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 데이터 point에 지정되는 x값의 간격.
첫번째 값은 xStart로 설정한다. time 축일 때, 정수 값 대신 시간 단위('y', 'm', 'w', 'd', 'h', 'n', 's')로 지정할 수 있다. 이 속성이 지정되지 않으면 xStep이 적용된다.

default :undefined

yAxis: string (opens in a new tab) | number (opens in a new tab)

그룹에 포함되면 그룹 설정을 따른다.

default :undefined

yField: string (opens in a new tab) | number (opens in a new tab) | Function (opens in a new tab)

json 객체나 배열로 전달되는 데이터포인트 정보에서 y 값을 지정하는 속성명이나 인덱스 또는, 전달되는 json 객체에서 y 값을 리턴하는 함수.
지정하지 않거나(undefined) 값이 undefined이면, , 데이터포인트의 값이 array일 때는 1, 객체이면 'y' 속성 값이 사용된다.

default :undefined

zField: string (opens in a new tab) | number (opens in a new tab) | Function (opens in a new tab)

json 객체나 배열로 전달되는 데이터포인트 정보에서 z 값을 지정하는 속성명이나 인덱스 또는, 전달되는 json 객체에서 z 값을 리턴하는 함수.
지정하지 않거나(undefined) 값이 undefined이면, , 데이터포인트의 값이 array일 때는 2, 객체이면 'z' 속성 값이 사용된다.

default :undefined

zOrder: number (opens in a new tab)

시리즈 표시 순서를 지정할 수 있다.
값이 클 수록 나중에(위에) 표시된다.

default :undefined