| 1 | <!DOCTYPE HTML> |
|---|
| 2 | <html> |
|---|
| 3 | |
|---|
| 4 | <head> |
|---|
| 5 | <style type="text/css"> |
|---|
| 6 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 7 | @import "../themes/TreeMap.css"; |
|---|
| 8 | </style> |
|---|
| 9 | |
|---|
| 10 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true"> |
|---|
| 11 | </script> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript"> |
|---|
| 14 | |
|---|
| 15 | require(["dojo/ready", "dojo/dom", "dojox/treemap/TreeMap", |
|---|
| 16 | "dojo/store/Memory", "dojox/color/MeanColorModel", "dojo/_base/Color"], |
|---|
| 17 | function(ready, dom, TreeMap, Memory, MeanColorModel, Color) { |
|---|
| 18 | ready(function(){ |
|---|
| 19 | var dataStore = new Memory({idProperty: "label", data: |
|---|
| 20 | [ |
|---|
| 21 | { label: "France", sales: 500, profit: 50, region: "EU" }, |
|---|
| 22 | { label: "Germany", sales: 450, profit: 48, region: "EU" }, |
|---|
| 23 | { label: "UK", sales: 700, profit: 60, region: "EU" }, |
|---|
| 24 | { label: "USA", sales: 2000, profit: 250, region: "America" }, |
|---|
| 25 | { label: "Canada", sales: 600, profit: 30, region: "America" }, |
|---|
| 26 | { label: "Brazil", sales: 450, profit: 30, region: "America" }, |
|---|
| 27 | { label: "China", sales: 500, profit: 40, region: "Asia" }, |
|---|
| 28 | { label: "Japan", sales: 900, profit: 100, region: "Asia" } |
|---|
| 29 | ] |
|---|
| 30 | }); |
|---|
| 31 | var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green)); |
|---|
| 32 | new TreeMap({store: dataStore, |
|---|
| 33 | areaAttr: "sales", |
|---|
| 34 | colorFunc: function(item){ |
|---|
| 35 | // use benefit % instead of absolute profit |
|---|
| 36 | return item.profit / item.sales; |
|---|
| 37 | }, |
|---|
| 38 | groupAttrs: ["region"], |
|---|
| 39 | colorModel: colorModel, |
|---|
| 40 | query: function(item){ |
|---|
| 41 | return item.sales > 500; |
|---|
| 42 | }}, dom.byId("treeMap")); |
|---|
| 43 | }); |
|---|
| 44 | } |
|---|
| 45 | ); |
|---|
| 46 | </script> |
|---|
| 47 | </head> |
|---|
| 48 | <body> |
|---|
| 49 | <div id="treeMap" style="width:640px;height:640px"></div> |
|---|
| 50 | </body> |
|---|
| 51 | </html> |
|---|
