맨위로가기
 

SBCHART

닫기

extend.matrix

#2.0.90

matrix 차트에 대한 확장 옵션을 지정합니다.
JSON 데이터에 각 설정항목이 전체 설정항목보다 우선합니다.

  • Type : Object
  • Format
    extend: {
        matrix: {
    	cell: {  
    	  padding: 1,
      	  borderRadius: 0,
      	  color: 'white',
      	  opacity: 0,
      	  stroke: {
      	    width: 0,
      	    color: 'black',
      	    opacity: 1,
      	  },
      	  data: {
      	    shape: {
      	      type: 'rect',
      	      padding: 0,
    	      borderRadius: 0,
    	      color: '#CCBFE4',
    	      opacity: 0,
    	      imageSrc: '',
    	      size: {
    	        width: 'half',
    	        height: 'half',
    	        radius: 'half',
    	        controlMinMaxValue: [0,0]
    	  	  },
      	      stroke: {
      	        width: 0,
      	        color: 'black',
      	        opacity: 1,
      	      },
      	    },
      	    text: {
      	      size: 10,
      	      color: 'black',
      	      weight: 'normal',
      	      family: 'sans-serif',
      	      format: null, 
      	    }
      	  }
     	},
     	rows: {
    	  count: undefined,
    	  group: undefined
     	},
     	columns: {
    	  count: undefined,
    	  group: undefined
     	},
    	isDrawAllCell: false,
    	highlightFilter: {
    	  type: 'both',
    	  color: 'black',
    	  opacity: 0.1
          }
       }
    }
    			
    		

cell.padding

#2.0.90

각 cell의 padding을 설정합니다.

  • Type : number
  • Defalut: 1

cell.borderRadius

#2.0.90

각 cell의 borderRadius를 설정합니다.

  • Type : number
  • Default : 0

cell.color

#2.0.90

각 cell의 color를 설정합니다.

  • Type : string
  • Default : white

cell.opacity

#2.0.90

각 cell의 opacity를 설정합니다.

  • Type : number
  • Default : 0

cell.stroke.width

#2.0.90

각 cell stroke의 width를 설정합니다.

  • Type : number
  • Default : 0

cell.stroke.color

#2.0.90

각 cell stroke의 color를 설정합니다.

  • Type : string
  • Default : black

cell.stroke.opacity

#2.0.90

각 cell stroke의 opacity를 설정합니다.

  • Type : number
  • Default : 1

cell.data.shape.type

#2.0.90

데이터의 형태를 설정합니다.

image type은 imageSrc 옵션과 함께 사용해야 합니다.

  • Type : rect | circle | image
  • Default : rect

cell.data.shape.padding

#2.0.90

데이터 영역과 셀 영역사이의 padding을 설정합니다.

  • Type : number
  • Defalut: 0

cell.data.shape.borderRadius

#2.0.90

데이터 영역의 borderRadius를 설정합니다.

  • Type : number
  • Default : 0

cell.data.shape.color

#2.0.90

데이터 영역의 color를 설정합니다.

  • Type : string
  • Default : #CCBFE4

cell.data.shape.opacity

#2.0.90

데이터 영역의 opacity를 설정합니다.

  • Type : number
  • Default : 1

cell.data.shape.imageSrc

#2.0.90

데이터 형태를 shape을 image로 설정했을 경우 적용 시킬 이미지 소스를 설정합니다.

imageSrc 옵션의 시작 위치는 root 폴더입니다.

  • Type : string

cell.data.shape.size.width

#2.0.90

데이터 영역의 width를 설정합니다.

value 타입은 데이터의 value에 따라 크기가 결정됩니다.

  • Type : number | half | full | value
  • Default : half

cell.data.shape.size.height

#2.0.90

데이터 영역의 height를 설정합니다.

value 타입은 데이터의 value에 따라 크기가 결정됩니다.

  • Type : number | half | full | value
  • Default : half

cell.data.shape.size.radius

#2.0.90

데이터 영역의 radius를 설정합니다.

value 타입은 데이터의 value에 따라 크기가 결정됩니다.

  • Type : number | half | full | value
  • Default : half

cell.data.shape.size.controlMinMaxValue

#2.0.90

데이터 영역의 size가 'value'일 때 최소/최대 크기를 설정합니다.

배열의 min, max 위치에 할당한 값만큼 데이터 크기의 편차가 줄어듭니다.

  • Type : number[min, max]
  • Default : [0, 0]

cell.data.shape.stroke.width

#2.0.90

각 데이터 영역 stroke의 width를 설정합니다.

  • Type : number
  • Default : 0

cell.data.shape.stroke.color

#2.0.90

각 데이터 영역 stroke의 color를 설정합니다.

  • Type : string
  • Default : black

cell.data.shape.stroke.opacity

#2.0.90

각 데이터 영역 stroke의 opacity를 설정합니다.

  • Type : number
  • Default : 1

cell.data.text.size

#2.0.90

각 데이터의 text size를 설정합니다.

  • Type : number

cell.data.text.size

#2.0.90

각 데이터의 text color를 설정합니다.

  • Type : string

cell.data.text.weight

#2.0.90

각 데이터의 text weight를 설정합니다.

  • Type : string | number

cell.data.text.family

#2.0.90

각 데이터의 text 폰트를 설정합니다.

  • Type : string

cell.data.text.format

#2.0.90

각 데이터의 text에 추가로 적용시킬 format을 설정합니다.

format의 첫번 째 인자는 데이터의 value값 입니다.

  • Type : Function

rows.count

#2.0.90

행의 갯수를 설정합니다.

해당 옵션을 통해 데이터가 없는 행을 표시할 수 있습니다.

rows.group 옵션과 함께 사용해야 합니다.

  • Type : number

rows.group

#2.0.90

행의 그룹들을 설정합니다.

해당 옵션을 통해 데이터와 별개로 그룹을 추가해 표시할 수 있습니다.

data.keys.value의 y값에 맞는 그룹들은 모두 화면에 표시되어야 합니다.

count 만큼 표시됩니다.

  • Type : object

columns.count

#2.0.90

열의 갯수를 설정합니다.

해당 옵션을 통해 데이터가 없는 열을 표시할 수 있습니다.

columns.group 옵션과 함께 사용해야 합니다.

  • Type : number

columns.group

#2.0.90

열의 그룹들을 설정합니다.

해당 옵션을 통해 데이터와 별개로 그룹을 추가해 표시할 수 있습니다.

data.keys의 x값에 맞는 그룹들은 모두 화면에 표시되어야 합니다.

count 만큼 표시됩니다.

  • Type : object

isDrawAllCell

#2.0.90

matrix 차트의 모든 cell을 표시할지 설정합니다.

  • Type : boolean
  • Type : false

highlightFilter.type

#2.0.90

각 cell을 클릭 했을 때 어떤 종류의 필터를 사용할지 설정합니다.

선택된 셀을 다시 클릭했을 경우 사라지는 토글 형식입니다.

  • Type : cell | row | column | both
  • Type : both

highlightFilter.color

#2.0.90

highlight 필터의 color를 설정합니다.

  • Type : string
  • Type : black

highlightFilter.opacity

#2.0.90

highlight 필터의 opacity를 설정합니다.

  • Type : black
  • Type : 0.1