맨위로가기
 

SBCHART

닫기

Ontology Options

#latest  #options

Ontology 차트 고유 옵션입니다.

Options

  • extend.ontology.dragable

  • extend.ontology.marginBoundary

  • extend.ontology.distance

  • extend.ontology.collisionRadius

  • extend.ontology.strength

  • extend.ontology.limitTickCount

  • extend.ontology.showAtOnce

  • extend.ontology.radiusRange

    -

  • extend.ontology.circleStyle.strokeStyle

  • extend.ontology.circleStyle.strokeColor

  • extend.ontology.circleStyle.strokeWidth

  • extend.ontology.circleStyle.strokeOpacity

  • extend.ontology.circleStyle.color

  • extend.ontology.circleStyle.opacity

  • extend.ontology.showText

  • extend.ontology.textColor

  • extend.ontology.textFontWeight

  • extend.ontology.textFontSize

  • extend.ontology.textMovePos

    -

  • extend.ontology.textPosition

  • extend.ontology.textPositionMargin

  • extend.ontology.useArrow

  • extend.ontology.arrowStyle.strokeStyle

  • extend.ontology.arrowStyle.strokeColor

  • extend.ontology.arrowStyle.strokeWidth

  • extend.ontology.arrowStyle.strokeOpacity

  • extend.ontology.arrowStyle.color

  • extend.ontology.arrowStyle.opacity

  • extend.ontology.showLink

  • extend.ontology.exceptRadiusLine

  • extend.ontology.curvedAngle

  • extend.ontology.curvedClockWise

  • extend.ontology.linkStyle.strokeStyle

  • extend.ontology.linkStyle.strokeColor

  • extend.ontology.linkStyle.strokeWidth

  • extend.ontology.linkStyle.strokeOpacity

  • extend.ontology.showLinkText

  • extend.ontology.linkTextColor

  • extend.ontology.linkTextFontWeight

  • extend.ontology.linkTextFontSize

Example

Code

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "ontology",
        json: [
       		{
        	  nodes: [
		        {"id":1, name: "연도", value: 11},
		        {"id":2, name: "사건", value: 12},
		        {"id":3, name: "기관", value: 13},
		        {"id":4, name: "인물", value: 14},
		        {"id":5, name: "foal:Agent", value: 15},
		        {"id":6, name: "직책", value: 16},
		        {"id":7, name: "부서", value: 17},
	        	{"id":8, name: "국가", value: 18},	 
	        	{"id":9, name: "외교문서", value: 19, fixedX: 500, fixedY: 300},
		        {"id":10, name: "키워드", value: 40},
		        {"id":11, name: "카테고리", value: 41, fixedY: 100},
		        {"id":12, name: "도시", value: 42, fixedX: 900, fixedY: 100},
		        {"id":13, name: "지역", value: 43},
		        {"id":14, name: "geo:partialThing", value: 44},	       		
		   ],
                  links: [
      		    	{"source":1, target: 2, name: "occurredEvent"},
                	{"source":1, target: 9, name: ""},
		        {"source":2, target: 3, name: "relatedOrg"},
		        {"source":3, target: 5, name: "SubClassOf"},
		        {"source":4, target: 5, name: "SubClassOf"},
		        {"source":4, target: 6, name: "hasPosition"},
	            	{"source":7, target: 5, name: "SubClassOf"},	          
	            	{"source":7, target: 9, name: "productDoc"},
		        {"source":8, target: 9, name: "relatedDoc"},
		        {"source":8, target: 12, name: ""},
		        {"source":9, target: 1, name: "startYear"},
		        {"source":9, target: 3, name: "relatedOrg"},
		     	{"source":9, target: 11, name: ""},
		     	{"source":9, target: 12, name: "relatedCity"},
		     	{"source":9, target: 13, name: "relatedArea"},
		       	{"source":10, target: 9, name: "relatedDoc"},
		       	{"source":11, target: 9, name: "hasDocument"},
		       	{"source":12, target: 14, name: "SubClassof11"},
		        {"source":12, target: 8, name: "belongedCountry"},
		        {"source":13, target: 14, name: "SubClassOf"},
      		  ]
      	     }
        ],
    },
    extend: {
        ontology: {
            dragable: true,
            marginBoundary: 60,
            distance: 100,
            collisionRadius: 100,
            strength: -30,
            limitTickCount: 100,
            radiusRange: { 
            	min: 20,
            	max: 60,
            },
            circleStyle: { 
            	strokeColor: "#d5eeba",
            	strokeWidth: 10,
            	strokeOpacity: 1,
            	color: "#159b99",
            	opacity: 1,
            },
            textColor: "#159b99",
            textFontWeight: "bold",
            textPosition: "bottom",
            textPositionMargin: 20,
            useArrow: "oneway",
            arrowStyle: { 
            	color: "#159b99",
            	opacity: 1,
            },
            exceptRadiusLine: true,
            linkStyle: { 
            	strokeWidth: 2,
            	strokeOpacity: 0.4,
            },
            showLinkText: true,
            linkTextFontWeight: "bold",
        }
    }
});