HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function() {
2
3
// create treemap chart
4
var chart = anychart.treeMap();
5
6
// headers settings
7
chart.maxHeadersHeight("10px");
8
chart.headersDisplayMode("crop");
9
10
// set title
11
chart.title("Headers Settings\nclick here to change maxHeadersHeight and headersDisplayMode");
12
13
chart.title().listen("click",function(){
14
// change header settings
15
chart.maxHeadersHeight("5%");
16
chart.headersDisplayMode("alwaysShow");
17
});
18
19
// setting the maximum levels depth
20
chart.maxDepth(3);
21
22
var rawData = [
23
{name: 'Eurasia',
24
children:[
25
{name: "Asia", children:[
26
{name: "Eastern Asia", children:[
27
{name:"Mongolia", value: 1564116, capital: 'Ulan-Bator'},
28
{name: "China", value: 1564116, capital: 'Beijing'},
29
{name: "Southern Korea", value: 1564116, capital: 'Seoul'},
30
{name: "Northern Korea", value: 120540, capital: 'Pyongyang'},
31
{name: "Japan", value: 1564116, capital: 'Tokio', children:[
32
{name: "Hokkaido", value: 83400},
33
{name: "Kyushu", value: 35640},
34
{name: "Honshu", value: 230500},
35
{name: "Shikoku", value: 1200}
36
]}
37
]},
38
{name: "Western Asia", children:[
39
{name: "Jordan", value: 92300, capital: 'Amman'},
40
{name: "Georgia", value: 69700, capital: 'Tbilisi'},
41
{name: "Israel", value: 20770, capital: 'Jerusalem'},
42
{name: "Armenia", value: 29743, capital: 'Yerevan'},
43
{name: "Azerbaijan", value: 86600, capital: 'Baku'},
44
{name: "Bahrain", value: 750, capital: 'Manama'},
45
]},
46
{name: "Southern Asia", children:[
47
{name:"India", value: 3287263, capital: "New Delhi"},
48
{name: 'Iran', parent: 'Southern Asia', value: 16480},
49
{name: 'Shri-Lanka', value: 65610, capital: 'Colombo'},
50
{name: 'Nepal', value: 140800, capital: 'Kathmandu'}
51
]},
52
{name: "South-Eastern Asia", children:[
53
{name: "Singapoor", value: 718.3, capital: 'Singapoor'},
54
{name: "Indonesia", value: 1919440, capital: "Jakarta", children:[
55
{name: "Java", value: 128297},
56
{name: "Kalimantan (Borneo)", value: 174600},
57
{name: "Sulawesi", value: 174600},
58
{name: "Sumatra", value: 473481}
59
]},
60
{name: "Thailand", value: 513.120, capital: 'Bangkok'},
61
{name: "Philippines", value: 300000, capital: 'Manila', children:[
62
{name: "Luzon", value: 104688},
63
{name: "Eastern Visayas", value: 15875},
64
{name: "Central Visayas", value: 21562},
65
{name: "Mindanayo", value: 21562}
66
]},
67
{name: "Laos", value: 236800, capital: 'Vientiane'},
68
{name: "Cambodia", value: 181040, capital: 'Phnom Penh'}
69
]},
70
{name: "Central Asia", children:[
71
{name: "Kazakhstan", value: 2724902, capital: 'Astana'},
72
{name: "Kyrgyzstan", value: 199951, capital: 'Bishkek'},
73
{name: "Tajikistan", value: 142000, capital: 'Dushanbe'},
74
{name: "Turkmenistan", value: 491200, capital: 'Ashgabat'},
75
{name: "Uzbekistan", value: 447400, capital: 'Tashkent'}
76
]}
77
]},
78
{name: "Europe", children: [
79
{name: "Eastern Europe", children:[
80
{name: "Poland", value: 312679, capital: 'Warsaw'},
81
{name: "Ukraine", value: 603628, capital: 'Kiev'}
82
]},
83
{name: "Western Europe", children:[
84
{name: "Austria", value: 83879, capital: 'Vienna'},
85
{name: "Germany", value: 357168, capital: 'Berlin'},
86
{name: "France", value: 643801, capital: 'Paris'}
87
]},
88
{name: "Southern Europe", children:[
89
{name: "Malta", value: 316, capital: 'Valletta'},
90
{name: "Greece", value: 131957, capital: 'Athens'},
91
{name: "Italy", value: 301338, capital: 'Rome'}
92
]},
93
{name: "Northern Europe", children:[
94
{name: "Finland", value: 338424, capital: 'Helsinki'},
95
{name: "Great Britain", value: 209331, capital: 'London'},
96
{name: "Ireland", value: 84421, capital: 'Dublin'},
97
{name: "Scandinavia", value: 928057, children:[
98
{name: "Sweden", value: 450295, capital: 'Stockholm'},
99
{name: "Norway", value: 385178, capital: 'Oslo'},
100
{name: "Denmark", value: 42923.53, capital: 'Copenhagen'}
101
]},
102
]}
103
]}
104
]}
105
];
106
107
// set data
108
var data = anychart.data.tree(rawData, anychart.enums.TreeFillingMethod.AS_TREE);
109
chart.data(data);
110
111
// display chart
112
chart.container('container');
113
chart.draw();
114
});