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 data = getData();
3
4
var chart = anychart.treeMap(data);
5
chart.title('Click on the chart and then double-click');
6
chart.listen('click', function (e) {
7
chart.title({fontColor: '#4CAF50'});
8
});
9
10
chart.listen('dblClick', function (e) {
11
chart.title('You can\'t click here anymore');
12
chart.title({fontColor: '#000000'});
13
14
// Removes all listeners
15
chart.removeAllListeners();
16
17
});
18
19
chart.container('container');
20
chart.draw();
21
});
22
23
function getData() {
24
return [
25
{
26
name: 'Eurasia',
27
children: [
28
{
29
name: 'Asia', children: [
30
{
31
name: 'Eastern Asia', children: [
32
{name: 'Mongolia', value: 1564116, capital: 'Ulan-Bator'},
33
{name: 'China', value: 1564116, capital: 'Beijing'},
34
{name: 'Southern Korea', value: 1564116, capital: 'Seoul'},
35
{name: 'Northern Korea', value: 120540, capital: 'Pyongyang'},
36
{name: 'Japan', value: 1564116, capital: 'Tokio'}
37
]
38
}
39
]
40
},
41
{
42
name: 'Europe', children: [
43
{
44
name: 'Northern Europe', children: [
45
{name: 'Finland', value: 338424, capital: 'Helsinki'},
46
{name: 'Great Britain', value: 209331, capital: 'London'},
47
{name: 'Ireland', value: 84421, capital: 'Dublin'},
48
{name: 'Scandinavia', value: 928057}
49
]
50
}
51
]
52
}
53
]
54
}
55
];
56
}