맨위로가기
 

SBCHART

닫기

Treemap Options

#latest  #options

Treemap 차트 고유 옵션입니다.

Options

  • global.treemap.innerGap

  • global.treemap.sorting

    셀 표시를 입력순으로 또는 크기순으로 설정합니다.

  • global.treemap.itemTextShow

  • global.treemap.itemTextColor

  • global.treemap.itemTextFitting

  • global.treemap.itemTextHorizontal

    셀 내부 라벨의 가로 정렬을 지정합니다. itemTextShow="true"시 사용가능합니다.

  • global.treemap.itemTextVertical

    셀 내부 라벨의 세로 정렬을 지정합니다. itemTextShow="true"시 사용가능합니다.

  • global.treemap.contentColorType

    셀 배경색을 json데이터에 설정된 색상을 표시할 지, gradation속성을 사용할지 default색상으로 설정할지 여부를 설정합니다.

  • global.treemap.gradationItem

    그라데이션 적용하기 위한 기준을 설정합니다.
    contentColorType속성값이 "gradation" 그리고 gradationColor속성 사용시 사용가능합니다.

  • global.treemap.gradationColor.useMiddleColor

    그라데이션 속성 사용시 middleColor지정 여부를 설정합니다.
    contentColorType속성값이 "gradation"일때 동작합니다.

  • global.treemap.gradationColor.startColor

    그라데이션의 시작 색상을 설정합니다.

  • global.treemap.gradationColor.endColor

    그라데이션의 종료 색상을 설정합니다.

  • global.treemap.gradationColor.middleColor

    그라데이션의 중간 색상을 설정합니다.

  • global.treemap.groupTitleShow

    그룹 타이틀 표시 여부를 설정합니다.

  • global.treemap.groupTitleHeight

    그룹 타이틀 높이를 설정합니다.
    groupTitleShow속성값이 true시 사용가능합니다.

  • global.treemap.groupTitleBackgroundColorRootLevel

    최상단 그룹타이틀 배경색을 설정합니다.

  • global.treemap.groupTitleBackgroundColor

    최상단 그룹 타이틀영역을 제외한 나머지 그룹 타이틀 영역의 배경색을 지정합니다.

  • global.treemap.groupTitlePosition

    그룹 타이틀 텍스트 가로 정렬을 설정합니다.

  • global.treemap.groupTitleColor

    그룹 타이틀 텍스트 색상을 설정합니다.

Example

Code

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "treemap",
        json: [
            { 
            	"name" : "연도별 직업별 여행횟수",
            	"children": [
            		{ 
	            		"name" : "2018",
	            		"children": [
		            		{"nickname":"임금봉급근로자", "count":"115094", "color":"#DC7367"},
		            		{"nickname":"학생", "count":"42896", "color":"#67B8DC"},
		            		{"nickname":"무직은퇴", "count":"22596", "color":"#6786DC"},
		            		{"nickname":"고용원있는사업주", "count":"20543", "color":"#DC9667"},
		            		{"nickname":"무급가족 종사자", "count":"20357", "color":"#DCB167"},
		            		{"nickname":"자영업", "count":"15487", "color":"#67D8DC"},
		            		{"nickname":"기타", "count":"9678", "color":"#7367DC"},
		            		{"nickname":"사무전문", "count":"8219", "color":"#DCCC67"},
		            		{"nickname":"전업주부", "count":"44522", "color":"#679EDC"},
		            		{"nickname":"기술생산노무", "count":"6875", "color":"#C9DC67"},
		            		{"nickname":"판매서비스", "count":"5217", "color":"#67DC8A"},
		            		{"nickname":"고용원없는자영업자", "count":"87521", "color":"#DC8367"},
	            		]
	            	} 
            	]
            } 
        ],
        keys: {
        	keyItem: "count",
        	textItem: "nickname",
        },
    },
    extend: {
        treemap: {
            innerGap: 1,
            sorting: "",
            itemTextShow: false,
            itemTextColor: "white",
            itemTextFitting: false,
            itemTextHorizontal: "left",
            itemTextVertical: "middle",
            contentColorType: "default",
            gradationItem: "value",
            gradationColor: { 
            	useMiddleColor: false,
            	startColor: "#67C531",
            	middleColor: "#F2E209",
            	endColor: "#DC6967",
            },
            groupTitleShow: false,
            groupTitleBackgroundColorRootLevel: "white",
            groupTitleHeight: 30,
            groupTitleColor: "black",
            groupTitleBackgroundColor: "#EEEEEE",
            groupTitlePosition: "left"
        }
    }
});