맨위로가기
 

SBCHART

닫기

extend.map.subchart (circle)

#2.0.52

맵 차트에 서브차트(circle) 사용을 위한 속성을 지정합니다.
서브차트는 현재 전국지도(1 level)만 지원됩니다.

  • Type : Object
  • Format
    extend: {
        map: {
            subchart: {
                show: true,
                type: "circle",
                basePosition: "code",
            	subDatas: [
            	    {
            	        data: {
            			json: [
            			  {"code": 11, "label": "서울", "value": 75, "x": -10, "y": 15, "color": "#00f"},
            			  {"code": 39, "label": "제주", "value": 55, "x": -10, "y": 15, "color": "#00f"},
            			],
    				keys: {
    					x: "code",
    					value: ["value"]
    				}
            		},
            	    },
            	],  
            	extend: {
            		circle: {
            			stroke: "red",
            			strokeWidth: 1.5,
            			strokeOpacity: 1,
            			color: "#81c147",
            			opacity: 0.5,
            			label: {
    		        		show: true,
    		        		textColor: "#f00",
    		        		textSize: 13
    	        		},
    	        		radius: {
    		        		min: 20,
    		        		max: 70,
    	        		},
    	        		values: {
    		        		min: 70,
    		        		max: 200,
    	        		},
    	        		format: function(value, label) {
    				    	return label + '\n' + value;
    				} 
            		},  
            	},  
            	global: {
            		onclick: function(code, label, value) {
           				console.log(label);
           			},	
            	},
            	tooltip: {
            		show: true,
            		format: {
    				value: function(key, value, region) {
    				    return region + " :: " + value;
    				}
            		}, 
            	},    
            }
        }
    }
    

extend.map.subchart.show

#2.0.52

맵차트에 서브차트 사용 여부를 설정합니다.
subchart.show, subchart.type, subchart.subDatas는 필수 속성입니다.

  • Type : Boolean

extend.map.subchart.type

#2.0.52

circle과 subchart(circle&pie)을 구분하기 위한 속성입니다
subchart.show, subchart.type, subchart.subDatas는 필수 속성입니다.

  • Type : String
  • Attributes :
    • "circle" : circle 타입을 표시할 때 사용합니다.
    • "bar" : subchart(circle&pie)을 표시할 때 사용합니다.

extend.map.subchart.basePosition

#2.0.52

맵차트에 subchart차트를 표시하기 위한 기준점을 설정합니다.

  • Type : String
  • Attributes :
    • "zero"(default) : svg태그 기준으로 (0,0)위치부터 표시합니다.
    • "code" : SIGUNGU.json의 SIG_CD와 subDatas의 position의 code와 일치하는 지역에 표시합니다.

extend.map.subchart.subDatas

#2.0.52

map차트에 표시할 subchart(circle&pie)의 위치정보 및 차트 데이터를 설정합니다.
position과 data는 반드시 입력받아야 합니다.
subchart.show, subchart.type, subchart.subDatas는 필수 속성입니다.

  • data :
    • "json" : json배열 형태로 맵차트에 표시할 circle 데이터를 설정
    • "keys" : circle를 표시할 코드 데이터에 매핑되는 속성값과, 데이터를 설정
  • json :
    • "code" : [필수] 지역 코드 데이터로 basePosition 속성값이 'code'시 해당 지역에 표시됩니다.
    • "label" : [필수] circle 영역에 표시할 label을 지정합니다.
    • "value" : [필수] circle 영역의 값을 지정합니다.
    • "x" : circle의 x축 방향으로 조절할 값입니다.
    • "y" : circle의 y축 방향으로 조절할 값입니다.
    • "color" : circle 영역에 background 색상을 지정합니다.

extend.map.subchart.extend.circle.stroke

#2.0.52

테두리 색상 설정합니다. stroke속성 미사용시 json color색상이 stroke 색상으로 표시합니다.

  • Type : String

extend.map.subchart.extend.circle.strokeWidth

#2.0.52

테두리 너비 설정합니다.

  • Type : Number

extend.map.subchart.extend.circle.strokeOpacity

#2.0.52

테두리 불투명도 설정합니다.

  • Type : Number

extend.map.subchart.extend.circle.color

#2.0.52

원 색상을 설정합니다. json에 color속성 적용시 해당 color가 적용되며 json.color와 color속성이 모두 미적용 시 기본색상이 적용됩니다.

  • Type : String

extend.map.subchart.extend.circle.opacity

#2.0.52

원 불투명도를 설정합니다.

  • Type : Number

extend.map.subchart.extend.label.show

#2.0.52

panel 표시 여부를 설정합니다.

  • Type : Boolean

extend.map.subchart.extend.pie.label.format

#2.0.52

라벨을 커스터마이징합니다.
(\n)사용하면 개행 가능합니다.

  • Type : Function
  • Format
    label: {
         format: function(value, label) {
             return label + '\n' + value;
         }
    }
    

extend.map.subchart.extend.label.textColor

#2.0.52

라벨 색상을 표시합니다.

  • Type : String

extend.map.subchart.extend.label.textSize

#2.0.52

라벨 텍스트 크기를 설정합니다.

  • Type : Number

extend.map.subchart.global.onclick

#2.0.52

맵 영역 클릭 이벤트 핸들러를 지정합니다.

  • Type : Function
  • Format
    subchart: {
      global: {
         onclick: functionfunction(code, label, value) {
             console.log(label, value);
         }
      }
    }
    
  • Function 파라미터
    • code : 선택한 차트 데이터
    • label : 선택한 라벨명
    • value : 선택한 값

extend.map.subchart.tooltip.show

#2.0.52

서브차트 툴팁 표시 여부를 지정합니다.

  • Type : Boolean

extend.map.subchart.tooltip.format.value

#2.0.52

툴팁의 범례 값을 변경합니다.

  • Type : Function
  • Parameter
    • keys : data.keys.value 값입니다.
    • value : data.keys.value 에 매핑되는 값입니다.
    • region : 이벤트가 발생한 지역명입니다.