TreemapChart (트리맵차트) Widget Control

TreemapChartウィジェットをスクリプトから制御するときに使用するWidget Control（Property · Method · Event）の一覧です。ウィジェットの紹介と使い方はTreemapChartドキュメントを参照してください。

備考

以下の例のtreemapchartIDは、キャンバスでTreemapChartウィジェットに指定した名前（ID）です。スクリプトではwidgetID.memberの形式でアクセスします。

Widget Control一覧

Widget Control	種類	シグネチャ	説明
setData	Method	setData(data)	ツリーマップ/ヒートマップのデータを差し替えてチャートを再描画
setCurrency	Method	setCurrency(unit)	売買代金・時価総額の表示通貨単位を設定（'원' / '달러'）
setStops	Method	setStops(jsonString)	JSONでカラーテーマ（プラス/マイナスの色区間など）を上書き
setTooltipFields	Method	setTooltipFields(jsonString)	項目のツールチップに表示するフィールドを構成
setGroupSummaryFields	Method	setGroupSummaryFields(jsonString)	グループサマリーに表示するフィールドを構成
onItemClick	Event	onItemClick = (code, groupCode) => { ... }	項目（タイル）をクリックしたときに実行

Property

備考

該当なし — TreemapChartウィジェットにはスクリプト専用のPropertyはありません。スクリプトでは、以下の共通Widget Control（getProperty / setProperty）で値を読み書きします。

Method

setData

ツリーマップ/ヒートマップのデータを差し替えて、チャートを再描画します。

• 種類: Method
• Parameters: data（文字列） - フラット配列（label、value、colorValue、extras、任意のchildren）または並列配列を持つ列形式オブジェクトのJSON文字列
• Returns: なし（void）

Example

treemapchartID.setData(JSON.stringify([
  { label: "삼성전자", value: 350, colorValue: 2.15, extras: { currentPrice: 72500 } },
  { label: "SK하이닉스", value: 280, colorValue: -1.2 }
]));

setCurrency

売買代金・時価総額の表示に使う通貨単位を設定します。選択した単位によって、金額の単位表記と小数の扱いが変わります。

• 種類: Method
• Parameters: unit（文字列） - '원'（韓国ウォン、デフォルト）または'달러'（米国株）
• Returns: なし（void）

Example

treemapchartID.setCurrency("달러");

setStops

JSONオブジェクトでツリーマップのカラーテーマを上書きし、キャッシュされたテーマ・ホバー状態を更新します。

• 種類: Method
• Parameters: jsonString（文字列） - プラス/マイナスの色区間（stops）、中立色、グロー、ツールチップ色などを含むJSONオブジェクト文字列
• Returns: なし（void）

Example

treemapchartID.setStops(JSON.stringify({
  positiveStops: [{ value: 0, color: "#FF1B5E20" }, { value: 3, color: "#FF4CAF50" }],
  negativeStops: [{ value: 0, color: "#FFB71C1C" }, { value: -3, color: "#FFE57373" }],
  zeroColor: "#FF9E9E9E",
  tooltipBgColor: "#FF202020"
}));

setTooltipFields

項目のツールチップに表示するフィールドをJSONで設定します。

• 種類: Method
• Parameters: jsonString（文字列） - フィールド仕様のJSON配列。各項目はkey、label、format（オプションオブジェクト）、useChangeColorを持ちます。formatのオプション: decimals（整数、デフォルト0）、comma（ブール値、デフォルトfalse）、sign（ブール値、デフォルトfalse）、prefix（文字列）、suffix（文字列）、divisor（数値、例 10000）
• Returns: なし（void）

Example

treemapchartID.setTooltipFields(JSON.stringify([
  { key: "colorValue", label: "등락률", format: { decimals: 2, sign: true, suffix: "%" }, useChangeColor: true },
  { key: "currentPrice", label: "현재가", format: { decimals: 0, comma: true } }
]));

setGroupSummaryFields

グループサマリー情報に表示するフィールドをJSONで設定します。形式はsetTooltipFieldsと同じです。

• 種類: Method
• Parameters: jsonString（文字列） - setTooltipFieldsと同じフィールド仕様のJSON配列
• Returns: なし（void）

Example

treemapchartID.setGroupSummaryFields(JSON.stringify([
  { key: "currentPrice", label: "현재가", format: { decimals: 0, comma: true } },
  { key: "colorValue", label: "등락률", format: { decimals: 2, sign: true, suffix: "%" }, useChangeColor: true }
]));

Event

onItemClick

チャートで項目（タイル）をクリックしたときに実行されます。ツリーマップ・ヒートマップの両方で共通です。実行する動作はコールバック関数で指定します。

• 種類: Event
• Parameters（ハンドラー引数）: code - クリックした銘柄コード、groupCode - 所属するグループコード（グループがない場合はnull）
• Returns: なし

Example

treemapchartID.onItemClick = (code, groupCode) => {
  // クリックした項目を処理
};

共通Widget Control（すべてのウィジェット）

注記

すべてのウィジェットは、setProperty / getProperty / setStylePropertyのような名前ベースの共通Widget Control（Method）を使用できます。共通リファレンスドキュメント（作成予定）を参照してください。