| 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 | |
|---|
| 9 | .dojoxTreeMap { |
|---|
| 10 | font-family: Geneva, Arial, Helvetica, sans-serif; |
|---|
| 11 | font-size: 16px; |
|---|
| 12 | text-align: center; |
|---|
| 13 | background: none; |
|---|
| 14 | } |
|---|
| 15 | |
|---|
| 16 | .dojoxTreeMapLeaf { |
|---|
| 17 | -webkit-border-radius: 15px 15px; |
|---|
| 18 | -moz-border-radius: 15px 15px; |
|---|
| 19 | border-radius: 15px 15px; |
|---|
| 20 | margin: 1px; |
|---|
| 21 | } |
|---|
| 22 | |
|---|
| 23 | .dojoxTreeMapHeader { |
|---|
| 24 | text-align: center; |
|---|
| 25 | -webkit-border-radius: 15px 15px; |
|---|
| 26 | -moz-border-radius: 15px 15px; |
|---|
| 27 | border-radius: 15px 15px; |
|---|
| 28 | background: #0B8CD4; |
|---|
| 29 | } |
|---|
| 30 | </style> |
|---|
| 31 | |
|---|
| 32 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true"> |
|---|
| 33 | </script> |
|---|
| 34 | |
|---|
| 35 | <script type="text/javascript"> |
|---|
| 36 | |
|---|
| 37 | require(["dojo/ready", "dojo/dom", "dojox/treemap/TreeMap", |
|---|
| 38 | "dojo/store/Memory", "dojox/color/MeanColorModel", "dojo/_base/Color"], |
|---|
| 39 | function(ready, dom, TreeMap, Memory, MeanColorModel, Color) { |
|---|
| 40 | ready(function(){ |
|---|
| 41 | var dataStore = new Memory({idProperty: "label", data: |
|---|
| 42 | [ |
|---|
| 43 | { label: "France", sales: 500, profit: 50, region: "EU" }, |
|---|
| 44 | { label: "Germany", sales: 450, profit: 48, region: "EU" }, |
|---|
| 45 | { label: "UK", sales: 700, profit: 60, region: "EU" }, |
|---|
| 46 | { label: "USA", sales: 2000, profit: 250, region: "America" }, |
|---|
| 47 | { label: "Canada", sales: 600, profit: 30, region: "America" }, |
|---|
| 48 | { label: "Brazil", sales: 450, profit: 30, region: "America" }, |
|---|
| 49 | { label: "China", sales: 500, profit: 40, region: "Asia" }, |
|---|
| 50 | { label: "Japan", sales: 900, profit: 100, region: "Asia" } |
|---|
| 51 | ] |
|---|
| 52 | }); |
|---|
| 53 | var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green)); |
|---|
| 54 | new TreeMap({store: dataStore, |
|---|
| 55 | areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"], |
|---|
| 56 | colorModel: colorModel }, dom.byId("treeMap")); |
|---|
| 57 | }); |
|---|
| 58 | } |
|---|
| 59 | ); |
|---|
| 60 | </script> |
|---|
| 61 | </head> |
|---|
| 62 | <body> |
|---|
| 63 | <div id="treeMap" style="width:640px;height:640px"></div> |
|---|
| 64 | </body> |
|---|
| 65 | </html> |
|---|
