맨위로가기
 

SBCHART

닫기

Matrix Options

#latest  #options

Matrix 차트 고유 옵션입니다.

Options

  • extend.matrix.cell.padding

  • extend.matrix.cell.borderRadius

  • extend.matrix.cell.color

  • extend.matrix.cell.opacity

  • extend.matrix.cell.stroke.width

  • extend.matrix.cell.stroke.color

  • extend.matrix.cell.stroke.opacity

  • extend.matrix.cell.data.shape.type

  • extend.matrix.cell.data.shape.padding

  • extend.matrix.cell.data.shape.borderRadius

  • extend.matrix.cell.data.shape.color

  • extend.matrix.cell.data.shape.opacity

  • extend.matrix.cell.data.shape.imageSrc

  • extend.matrix.cell.data.shape.size.width

  • extend.matrix.cell.data.shape.size.height

  • extend.matrix.cell.data.shape.size.radius

  • extend.matrix.cell.data.shape.size.controlMinMaxValue

  • extend.matrix.cell.data.shape.size.controlMinMaxValue

  • extend.matrix.cell.data.shape.stroke.width

  • extend.matrix.cell.data.shape.stroke.color

  • extend.matrix.cell.data.shape.stroke.opacity

  • extend.matrix.cell.data.text.size

  • extend.matrix.cell.data.text.color

  • extend.matrix.cell.data.text.weight

  • extend.matrix.cell.data.text.family

  • extend.matrix.cell.data.text.format

  • extend.matrix.rows.count

  • extend.matrix.rows.group

  • extend.matrix.columns.count

  • extend.matrix.columns.group

  • extend.matrix.isDrawAllCall

  • extend.matrix.highlightFilter.type

  • extend.matrix.highlightFilter.color

  • extend.matrix.highlightFilter.opacity

Example

Code

var chart =  sb.chart.render("#chartWrap", {
    data: {
      type: "matrix",
      json: [  
        {x: '서울', y: '10개 이상', value: 123},
        {x: '서울', y: '100개 이상', value: 222},
        {x: '서울', y: '1000개 이상', value: 2500},
        {x: '부산', y: '10개 이상', value: 3000},
        {x: '부산', y: '100개 이상', value: 600}, 
        {x: '부산', y: '1000개 이상', value: 2000},
        {x: '제주', y: '10개 이상', value: 200,},
        {x: '제주', y: '100개 이상', value: 300},
        {x: '제주', y: '1000개 이상', value: 4000},
      ], 
        keys: {
           x:'x',
           value: [{y:'y', value:'value'}]
        },
      },
      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: null,
		  group: null
	 	},
	 	columns: {
		  count: null,
		  group: null
	 	},
		isDrawAllCell: false,
		highlightFilter: {
		  type: 'both',
	  	  color: 'black',
		  opacity: 0.1
        }
      }
    }
})