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('Convert the global coordinates to local coordinates');
8
chart.padding('7%');
9
chart.container(stage);
10
chart.draw();
11
12
// Converts the global coordinates to local coordinates.
13
var localCoordinates = chart.globalToLocal(8, 8);
14
15
var rectangle = stage.rect(0, 0, 170, 30);
16
rectangle.fill({opacity: 0.1});
17
18
rectangle.setX(localCoordinates.x);
19
rectangle.setY(localCoordinates.y);
20
21
var customText = anychart.graphics.text(localCoordinates.x, localCoordinates.y, "");
22
customText.htmlText("Local coordinates [x: "
23
+ localCoordinates.x + ", y: " + localCoordinates.y + "]<br>Global coordinates [x: 8, y: 8]");
24
customText.parent(stage);
25
26
// Visualises local bounds.
27
var localBounds = stage.rect();
28
localBounds.setBounds(stage.getBounds());
29
});
30
31
function getData() {
32
return [
33
{
34
name: 'Eurasia',
35
children: [
36
{
37
name: 'Asia', children: [
38
{
39
name: 'Eastern Asia', children: [
40
{name: 'Mongolia', value: 1564116, capital: 'Ulan-Bator'},
41
{name: 'China', value: 1564116, capital: 'Beijing'},
42
{name: 'Southern Korea', value: 1564116, capital: 'Seoul'},
43
{name: 'Northern Korea', value: 120540, capital: 'Pyongyang'},
44
{name: 'Japan', value: 1564116, capital: 'Tokio'}
45
]
46
}
47
]
48
},
49
{
50
name: 'Europe', children: [
51
{
52
name: 'Northern Europe', children: [
53
{name: 'Finland', value: 338424, capital: 'Helsinki'},
54
{name: 'Great Britain', value: 209331, capital: 'London'},
55
{name: 'Ireland', value: 84421, capital: 'Dublin'},
56
{name: 'Scandinavia', value: 928057}
57
]
58
}
59
]
60
}
61
]
62
}
63
];
64
}