TreemapChart

TreemapChartウィジェットは、各項目を広さ（面積）で表現して値の比重を一目で示す長方形タイルチャートです。
株価ヒートマップのように、値の大きさと騰落（色）を合わせて表すときに使います。

定義・役割

TreemapChartウィジェットは、階層型データを面積でエンコードしたツリーマップ（ヒートマップ）を描画します。各タイルの大きさは値（value）に、色は騰落値（colorValue）に対応します。セル間隔・角丸・アニメーションの使用有無を設定でき、タイルをクリックするとクリック動作が実行されます。

• カテゴリー: Contents
• デフォルトのサイズ: 300 × 200
• 編集（デザイン）画面では、サンプルの銘柄データが表示されます。

機能

機能	説明
面積ベースの可視化	各項目の値（value）をタイルの広さで表現し、比重を比較します。
色（騰落）の表現	騰落値（colorValue）に応じて、タイルの色がプラス/マイナスの色区間にマッピングされます。
データの差し替え	スクリプトからデータをJSONで差し替えてチャートを更新します。
ツールチップ・グループ要約	項目のツールチップとグループ要約に表示するフィールドを構成します。
クリック操作	タイルをクリックすると、接続された動作が実行されます。
見た目の設定	セル間隔・角丸・アニメーションの使用有無を調整します。

使い方

1. 左のウィジェットパレットでContentsカテゴリーを開きます。
2. TreemapChart項目をキャンバスにドラッグ＆ドロップします。
3. 右のプロパティパネルで、セル間隔（spacing）・角丸（borderRadius）・アニメーション（useAnimation）を調整します。
4. 実際のデータを入れるには、スクリプトからデータをJSONで渡します。
5. タイルのクリック反応が必要な場合は、クリック動作を接続します。

注記

スクリーンショット必要: 左のウィジェットパレットからTreemapChart項目をキャンバスへドラッグする様子

プロパティ

プロパティ	説明	デフォルト値	値 / タイプ
bgColor	チャートの背景色 — 現在のバージョンでは動作しません。	未設定	カラー
spacing	タイル（セル）間の間隔	2	数値（0以上）
borderRadius	タイルの角丸	0	数値（0以上）
useAnimation	セル表示アニメーションを使うか	false	true / false

注意・ヒント

ヒント

編集（デザイン）画面には、サンプルの銘柄データが表示されます。実際のデータは、スクリプトからデータを入れて初めて反映されます。

注記

タイルの色は、値の騰落（colorValue）に応じてプラス/マイナスの色区間にマッピングされます。色区間と通貨単位（'원' / '달러'）はスクリプトで変更できます。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、TreemapChart Widget Controlドキュメントでご確認ください。