TreeMap
TsgcHTMLComponent_TreeMap — Delphi、C++ Builder、.NET で、チャートライブラリ不要の、自己完結型でサーバー生成のインライン SVG としてスクエア化ツリーマップをレンダリングします。
TsgcHTMLComponent_TreeMap — Delphi、C++ Builder、.NET で、チャートライブラリ不要の、自己完結型でサーバー生成のインライン SVG としてスクエア化ツリーマップをレンダリングします。
ラベルと値を持つ項目を追加します（またはデータセットをバインドし）、配色を選択してから、HTML プロパティを読み取ります。
TsgcHTMLComponent_TreeMap
自己完結型インライン SVG、スクエア化レイアウト
Delphi, C++ Builder, .NET
各矩形に対して AddItem を呼び出し、ColorScheme を選択してから、HTML を読み取ります。レイアウトはサーバー側で計算されるため、クライアント側のライブラリは不要です。
uses
sgcHTML_Component_TreeMap;
var
oTreeMap: TsgcHTMLComponent_TreeMap;
begin
oTreeMap := TsgcHTMLComponent_TreeMap.Create(nil);
try
oTreeMap.Width := 640;
oTreeMap.Height := 360;
oTreeMap.ColorScheme := tmCool;
oTreeMap.ShowValues := True;
oTreeMap.AddItem('Engineering', 420000);
oTreeMap.AddItem('Sales', 260000);
oTreeMap.AddItem('Marketing', 140000);
oTreeMap.AddItem('Support', 90000, '#20c997'); // explicit colour overrides the scheme
WebModule.Response := oTreeMap.HTML; // <svg> squarified rectangles, no client-side library
finally
oTreeMap.Free;
end;
end;
// Or bind it straight to a dataset:
oTreeMap.LoadFromDataSet(qryBudget, 'Department', 'Amount');
// One-shot helper, no instance to manage:
Response := TsgcHTMLComponent_TreeMap.Build(['Engineering', 'Sales'], [420000, 260000]);// includes: sgcHTML_Component_TreeMap.hpp
TsgcHTMLComponent_TreeMap *oTreeMap = new TsgcHTMLComponent_TreeMap(NULL);
try
{
oTreeMap->Width = 640;
oTreeMap->Height = 360;
oTreeMap->ColorScheme = tmCool;
oTreeMap->ShowValues = true;
oTreeMap->AddItem("Engineering", 420000);
oTreeMap->AddItem("Sales", 260000);
oTreeMap->AddItem("Marketing", 140000);
oTreeMap->AddItem("Support", 90000, "#20c997"); // explicit colour overrides the scheme
String html = oTreeMap->HTML; // <svg> squarified rectangles, no client-side library
}
__finally
{
delete oTreeMap;
}using esegece.sgcWebSockets;
var treeMap = new TsgcHTMLComponent_TreeMap();
treeMap.Width = 640;
treeMap.Height = 360;
treeMap.ColorScheme = TsgcHTMLTreeMapScheme.tmCool;
treeMap.ShowValues = true;
treeMap.AddItem("Engineering", 420000);
treeMap.AddItem("Sales", 260000);
treeMap.AddItem("Marketing", 140000);
treeMap.AddItem("Support", 90000, "#20c997"); // explicit colour overrides the scheme
string html = treeMap.HTML; // <svg> squarified rectangles, no client-side library
// One-shot helper, no instance to manage:
string quick = TsgcHTMLComponent_TreeMap.Build(new[] { "Engineering", "Sales" }, new[] { 420000d, 260000d });最もよく使うメンバーです。
AddItem(aLabel, aValue, aColor) はリーフ矩形を追加します。aColor を明示的に指定すると、有効な ColorScheme を上書きします。
Items は 2 階層のツリーマップをサポートします。親項目と子項目に ID / ParentID を設定すると、子矩形が薄い色の親の中にネストされます。
LoadFromDataSet(aDataSet, aLabelField, aValueField) は、行ごとに 1 つのフラットな項目を読み込みます。
クラス関数 Build(aLabels, aValues) は、コンポーネントのインスタンスを管理することなく、フラットなツリーマップを文字列として直接レンダリングします。
Width、Height、Padding、ColorScheme（default/blue/green/warm/cool/gray）が、キャンバスと自動割り当てされる矩形の色を制御します。
ShowLabels、ShowValues、MinLabelSize、FontSize が、矩形のキャプションをいつどのように描画するかを決定します。HTML は完成したインライン <svg> を返します。