#latest #options
Tree 차트 고유 옵션입니다.
extend.tree.draggable
extend.tree.zoomable
extend.tree.zoomRange
-
extend.tree.collapse
extend.tree.treeType
extend.tree.sort
extend.tree.margin
top:
bottom:
left:
right:
extend.tree.nodeStyle.showNode
extend.tree.nodeStyle.radius
extend.tree.nodeStyle.color
extend.tree.nodeStyle.strokeColor
extend.tree.nodeStyle.strokeWidth
extend.tree.nodeStyle.collapsedColor
extend.tree.nodeStyle.collapsedStrokeColor
extend.tree.textStyle.showText
extend.tree.textStyle.textFontSize
extend.tree.textStyle.textFontWeight
extend.tree.textStyle.textFontStyle
extend.tree.textStyle.textColor
extend.tree.textStyle.textMovePos.parentPosition
x
y
extend.tree.textStyle.textMovePos.leafPosition
x:
y:
extend.tree.textStyle.useStroke
extend.tree.textStyle.strokeColor
extend.tree.textStyle.strokeWidth
extend.tree.linkStyle.linkType
extend.tree.linkStyle.width
extend.tree.linkStyle.color
const chart = new sb.chart("#chartWrap", {
global: {
svg: {
className: "sbchart"
},
export: {
show: true
},
size: {
width: 1000,
height: 400
},
chartArea: {
show: true,
},
},
data: {
type: "tree",
json: [
{
name: "Company",
children: [
{
name: "Sales",
children: [
{
name: "Domestic Sales",
children: [
{ name: "Team A" },
{ name: "Team B" },
{ name: "Team C" }
]
},
{
name: "International Sales",
children: [
{ name: "Team D" },
{ name: "Team E" }
]
}
]
},
{
name: "Engineering",
children: [
{
name: "Software",
children: [
{ name: "Frontend Team" },
{ name: "Backend Team" },
{ name: "QA Team" }
]
},
{
name: "Hardware",
children: [
{ name: "Design Team" },
{ name: "Manufacturing Team" }
]
}
]
},
{
name: "HR",
children: [
{ name: "Recruiting" },
{ name: "Benefits" },
{ name: "Training" }
]
},
{
name: "Marketing",
children: [
{ name: "Product Marketing" },
{ name: "Content Team" },
{ name: "Social Media Team" },
{ name: "Events Team" }
]
},
{
name: "Finance",
children: [
{ name: "Accounting" },
{ name: "Treasury" },
{ name: "Internal Audit" }
]
}
]
}
]
},
extend: {
tree: {
treeType: "horizontal",
sort: "asc",
draggable: true,
zoomable: true,
zoomRange: {
min: 1,
max: 10,
},
margin: {
top: 10,
bottom: 10,
right: 50,
left: 20,
},
useImage: false,
collapse: true,
linkStyle: {
linkType: "curved",
width: 3,
color: "steelblue",
},
textStyle: {
showText: true,
textFontSize: 10,
textFontWeight: 5,
textFontStyle: "italic",
textColor: "grey",
useStroke: true,
strokeColor: "white",
strokeWidth: 3,
textMovePos: {
parentPosition: {x: 0,y: 0,},
leafPosition: {x: 0,y: 0,}
},
},
nodeStyle: {
showNode: true,
radius: 5,
color: "white",
strokeWidth: 3,
strokeColor: "steelblue",
collapsedColor: "steelblue",
collapsedStrokeColor: "steelblue",
},
}
}
});