마운트할 컨테이너 셀렉터 문자열 또는 엘리먼트
Container selector string or element to mount into
マウントするコンテナのセレクタ文字列、または要素
挂载目标容器的选择器字符串或元素
조직도 옵션
Org-chart options
組織図のオプション
组织架构图选项
모든 노드를 접는다(루트만 표시). 큰 조직도를 처음 접했을 때 최상위 구조부터 보여주고 싶을 때 호출.
Collapse all nodes (roots only). Call to show top-level structure first when a large org chart is first opened.
すべてのノードを折りたたみます(ルートのみ表示)。大きな組織図を初めて開いたときに、 最上位の構造から見せたい場合に呼び出します。
折叠所有节点(仅显示根节点)。初次打开较大的组织架构图,想先展示最上层结构时调用。
모든 노드를 펼친다. 조직 전체를 한눈에 훑어보고 싶을 때 호출.
Expand all nodes. Call when the viewer wants to see the whole organization at a glance.
すべてのノードを展開します。組織全体をひと目で見渡したいときに呼び出します。
展开所有节点。想一眼纵览整个组织时调用。
조직도 데이터를 설정하고 렌더한다. 최초 로드는 물론, 데이터를 새로 받아올 때마다 다시 호출하면 트리를 재구성해 다시 그린다.
Set org-chart data and render. Call this on initial load and again whenever fresh data arrives — it rebuilds the tree and redraws.
組織図のデータを設定してレンダリングします。初回ロードはもちろん、データを新しく受け取るたびに 再び呼び出せば、ツリーを再構成して描き直します。
设置组织架构图数据并渲染。首次加载时调用它,之后每次拿到新数据也再调用一次 —— 它会重建树并 重新绘制。
부모/자식 관계를 가진 평면 행 배열
Flat array of rows with parent/child relations
親子関係を持つフラットな行の配列
带有父子关系的扁平行数组
형태(스킨) 테마를 컨테이너에 설정한다. 색은 그대로 두고 모서리·밀도 같은 겉모양만 바꾸고
싶을 때 쓴다. setTheme(색)과 서로 독립된 축이라, 색 테마는 그대로 두고 스킨만 바꾸거나
그 반대로 자유롭게 조합할 수 있다.
Set the form (skin) theme on the container. Use this to change the look (corner radius,
density, etc.) while leaving color untouched. This is an axis independent from setTheme
(color), so you can swap the skin alone, the color theme alone, or both freely.
形(スキン)テーマをコンテナに設定します。色はそのままにして、角丸・密度のような見た目だけを
変えたいときに使います。setTheme(色)とは互いに独立した軸なので、色テーマはそのままで
スキンだけを変えたり、その逆も自由に組み合わせできます。
在容器上设置形态(皮肤)主题。想保持颜色不变,只改圆角、密度这类外观时使用它。它与
setTheme(颜色)是彼此独立的两个维度,因此可以只换皮肤、只换颜色主题,也可以两者自由组合。
data-og-skin 값
data-og-skin value
data-og-skin の値
data-og-skin 的值
색 테마(라이트/다크 등)를 컨테이너에 설정한다. 호스트 페이지의 다크모드 토글에 맞춰 전환할 때 호출한다.
Set the color theme (light/dark, etc.) on the container. Call this when switching to match the host page's dark-mode toggle.
色テーマ(ライト/ダークなど)をコンテナに設定します。ホストページのダークモードトグルに 合わせて切り替えるときに呼び出します。
在容器上设置颜色主题(浅色/深色等)。需要跟随宿主页面的深色模式开关切换时调用它。
data-og-theme 값
data-og-theme value
data-og-theme の値
data-og-theme 的值
조직도 컴포넌트.
Org-chart component.
組織図コンポーネント。
组织架构图组件。
보고 라인·조직 구조·계층형 카테고리처럼 "누가 누구 밑에 있는가"를 시각적으로 보여주고 싶을 때 쓴다. 그리드와 별개의 독립 컴포넌트라서, 그리드 없이 조직도 하나만 페이지에 넣어도 동작한다. 동작 순서:
setData()로 평면 행 배열(각 행에 id/parentId만 있으면 됨)을 넘기면 → 내부에서 부모/자식 관계(idField/parentIdField)를 따라 트리로 구성하고 → 그 결과를 SVG 연결선 + 노드 카드로 화면에 그린다.Use this when you need to show "who reports to whom" — org structure, reporting lines, or hierarchical categories. It's a standalone component independent of the grid, so it works on its own with no grid on the page. Operation order: pass a flat row array to
setData()(each row just needs an id/parentId) → internally it's built into a tree following the parent/child relation (idField/parentIdField) → the result is drawn on screen as SVG connectors plus node cards.レポートライン・組織構造・階層型カテゴリのように「誰が誰の下にいるか」を視覚的に見せたいときに 使います。グリッドとは別の独立したコンポーネントなので、グリッドなしで組織図だけをページに 置いても動作します。動作の順序:
setData()にフラットな行の配列(各行に id/parentId さえあれば 十分)を渡すと → 内部で親子関係(idField/parentIdField)をたどってツリーを構成し → その結果を SVG の連結線 + ノードカードとして画面に描画します。当你需要直观展示「谁在谁的下面」时使用它 —— 汇报关系、组织结构或层级分类。它是独立于表格的 组件,页面上没有表格也能单独工作。执行顺序: 向
setData()传入扁平的行数组(每行只需带有 id/parentId) → 内部按父子关系(idField/parentIdField)构建成树 → 再把结果绘制为 SVG 连接线和 节点卡片。Example