Wijmo UI for the Web
TreeMapのサイズの変更
| Wijmo ユーザーガイド > ウィジェット > TreeMap > 主な機能 > TreeMapのサイズの変更 |
Wijtreemap ウィジェットでは、resize オプションを使用して、ツリーマップの 高さと幅 を実行時に変更できます。たとえば、次のスクリプトは、ツリーマップにサイズ変更ボタンと更新ボタンを追加します。
Wijtreemap ウィジェットでは、すべての要素が指定のキャンバスサイズ内に表示されるように、子ノードと同時に親の長方形も自動的にサイズ変更されます。ツリーマップノードのラベルテキストは、表示サイズに合わせて折り返して表示されます。
| スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijtreemap"], function () { $(document).ready(function () { $("#treemap").wijtreemap({ showTooltip: true, //set color values for the treemap maxColor: "#FF3300", minColor: "#FFFF66", midColor: "#99FF33", maxColorValue: 45000000, minColorValue: 950000, midColorValue: 4000000, //add data to the treemap data: [{ //create and add regions on level 0 label: "Asia", value: 44579000, minColor: "#B2E0FF", maxColor: "#0099FF", midColor: "#66C2FF", items: [{ //create and add regions on level 1 label: "Central Asia", value: 4003451 }, { label: "Eastern Asia", value: 11839074, items: [{ //create and add regions on level 2 label: "China", value: 9596961 }, { label: "Japan", value: 377944 }, { label: "Others", value: 1864169 }] }, { label: "South-East Asia", value: 4500000 }, { label: "Western Asia", value: 6255160 }, { label: "Southern Asia", value: 17981315, items: [{ label: "India", value: 3287590 }, { label: "Others", value: 14693725 }] }] }, { label: "Africa", value: 30221532, minColor: "#FFFFC2", maxColor: "#CCCC52", midColor: "#FFFF75", items: [{ label: "Northern Africa", value: 8935659, items: [{ label: "Egypt", value: 1002450 }, { label: "Morocco", value: 33250000 }] }, { label: "Central Africa", value: 6612667 }, { label: "Western Africa", value: 5112903 }, { label: "Southern Africa", value: 1221037 }, { label: "Eastern Africa", value: 8339266 }] }, { label: "Americas", value: 42549000, minColor: " #C2FFC2", maxColor: " #52CC52", midColor: " #94FF94", items: [{ label: "South America", value: 17840000, items: [{ label: "Brazil", value: 8515767 }, { label: "Argentina", value: 2780400 }, { label: "Peru", value: 1285216 }, { label: "Colombia", value: 1141748 }, { label: "Others", value: 4116869 }] }, { label: "North America", value: 24709000, items: [{ label: "Canada", value: 9984670 }, { label: "United States", value: 9629091 }, { label: "Greenland", value: 2166086 }, { label: "Mexico", value: 1972550 }, { label: "Others", value: 956603 }] }] }, { label: "Europe", value: 10180000, minColor: "#FFCC99", maxColor: "#E68A2E", midColor: "#FFAD5C", items: [{ label: "Ukraine", value: 603628 }, { label: "Spain", value: 504645 }, { label: "France", value: 640679 }, { label: "Sweden", value: 449964 }, { label: "Others", value: 7981084 }] }, { label: "Oceania", value: 8525989, minColor: "#00FFFF", maxColor: "#4DFFFF", midColor: "#33FFFF", items: [{ label: "Australia", value: 7692024 }, { label: "NewZealand", value: 268021 }, { label: "others", value: 565944 }] }, { label: "Antartica", value: 14000000 }] }); //add Resize button and set height and width of the treemap $("#btn_resize1").click(function () { $('#treemap').wijtreemap({ width: 350, height: 350 }) }) //add Refresh button and set height and width of the treemap $("#btn_refresh1").click(function () { $("#treemap").wijtreemap({ width: 800, height: 400 }); }); }); }) </script> | |