OrganizationChart
OrganizationChart は階層的な組織データを可視化します。
インポート#
import { OrganizationChart } from 'primereact/organizationchart';
基本#
OrganizationChart は、value として TreeNode インスタンスのコレクションが必要です。
<OrganizationChart value={data} />
テンプレート#
ノードの label の代わりにカスタムコンテンツは、nodeTemplate プロパティを使用して定義します。
<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
選択#
ノードは、selection および onSelectionChange プロパティとの値バインディングとともに selectionMode を定義することで選択できます。デフォルトでは、1 つのノードのみを選択できます。複数のノードを選択するには、selectionMode を multiple に設定します。
<OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
色付き#
特定のノードのスタイリングは、TreeNode の className および style オプションで構成します。
<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
アクセシビリティ#
スクリーンリーダー
コンポーネントは現在、テーブルベースの実装を使用しており、高レベルのスクリーンリーダーサポートを提供していません。今後のバージョンでは、高レベルのリーダーサポートのために、ツリーウィジェットに合わせたariaロールと属性を備えたネストされたリストの実装への置き換えが計画されています。
キーボードサポート
| キー | 機能 |
|---|---|
| tab | チャート内のフォーカス可能な要素を移動します。 |
| enter | ノードの展開状態を切り替えます。 |
| space | ノードの展開状態を切り替えます。 |
| テンキー enter | ノードの展開状態を切り替えます。 |