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
var stage = anychart.graphics.create('container');
3
4
var data = getData();
5
6
var chart = anychart.treeMap(data);
7
chart.title('Get and use pixel bounds object');
8
chart.container(stage);
9
chart.draw();
10
11
// Gets pixel bounds.
12
var bounds = chart.getPixelBounds();
13
14
var customBackground = anychart.standalones.background();
15
customBackground.fill('#ff6a6a 0.2');
16
customBackground.parentBounds(bounds);
17
customBackground.container(stage);
18
customBackground.draw();
19
});
20
21
function getData() {
22
return [
23
{
24
name: 'Eurasia',
25
children: [
26
{
27
name: 'Asia', children: [
28
{
29
name: 'Eastern Asia', children: [
30
{name: 'Mongolia', value: 1564116, capital: 'Ulan-Bator'},
31
{name: 'China', value: 1564116, capital: 'Beijing'},
32
{name: 'Southern Korea', value: 1564116, capital: 'Seoul'},
33
{name: 'Northern Korea', value: 120540, capital: 'Pyongyang'},
34
{name: 'Japan', value: 1564116, capital: 'Tokio'}
35
]
36
}
37
]
38
},
39
{
40
name: 'Europe', children: [
41
{
42
name: 'Northern Europe', children: [
43
{name: 'Finland', value: 338424, capital: 'Helsinki'},
44
{name: 'Great Britain', value: 209331, capital: 'London'},
45
{name: 'Ireland', value: 84421, capital: 'Dublin'},
46
{name: 'Scandinavia', value: 928057}
47
]
48
}
49
]
50
}
51
]
52
}
53
];
54
}