Wijmo User Guide > Widgets > TreeMap > Features > Resize TreeMap |
Wijtreemap allows you to resize the height and width of the treemap at run-time using the resize option. For example, the script below adds a resize and refresh button to the treemap.
Wijtreemap automatically adjusts the size of rectangles for parent as well as children nodes to display all the elements on the specified canvas size. Label text of the treemap nodes also get wrapped according to the size.
Script |
Copy Code |
---|---|
<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> |