組織の階層

wijtreemap ウィジェットを使用すると、領域をいくつものサブ領域に分割することで、階層データを表示できます。このシナリオでは、3 つのレベルで組織の階層を表します。第 1 レベルは、3 つの企業の社名を表します。第 2 レベルは、個々の企業の部門を示します。第 3 レベルは、各部門の担当する業務内容を示します。

ツリーマップの各エリアは、各部門の従業員数に従って分割します。

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「 wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

参照	コードのコピー
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script>

<body> タグ内に次のマークアップを追加して、ウィジェットを作成します。<div> 要素によってウィジェットが作成されます。また、ウィジェットの高さと幅が設定され、ラベルとタイトルを表示するためのチェックボックスが追加されます。

ドロップダウンしてマークアップをコピーし、body タグ内に貼り付けます。

マークアップ	コードのコピー
<div> <h3 style="text-align:center">Department-wise Employee Count</h3> <br /> <input type="checkbox" id="showTitle" value="showTitle" checked="checked" /><label for="showTitle">show title</label> <input type="checkbox" id="showLabel" value="showLabel" checked="checked" /><label for="showLabel">show label</label> <div id="treemap" style="width: 800px; height: 400px;"></div> </div>

<head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトはウィジェットを初期化し、ツリーマップに表示するデータを追加します。

ドロップダウンしてマークアップをコピーし、body タグ内に貼り付けます。

関連トピック

参照