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 a chart and set the data
4
var chart = anychart.treeMap(getData(), "as-tree");
5
6
// set the depth of hints
7
chart.hintDepth(2);
8
9
// configure labels
10
chart.labels().format("{%name}");
11
12
// disable the drilldown feature
13
chart.listen("drillchange", function(e){
14
return false;
15
});
16
17
// set the chart title
18
chart.title("Treemap: Interactivity (Disabling Drilldown)");
19
20
// set the container id
21
chart.container("container");
22
23
// initiate drawing the chart
24
chart.draw();
25
});
26
27
// get data
28
function getData() {
29
// create data
30
var data = [
31
{name: "Root", children: [
32
{name: "Item 1", children: [
33
{name: "Item 1-1", children: [
34
{name: "Item 1-1-1", value: 1000},
35
{name: "Item 1-1-2", value: 600},
36
{name: "Item 1-1-3", value: 550},
37
{name: "Item 1-1-4", value: 300},
38
{name: "Item 1-1-5", value: 150}
39
]},
40
{name: "Item 1-2", value: 2300},
41
{name: "Item 1-3", value: 1500}
42
]},
43
{name: "Item 2", children: [
44
{name: "Item 2-1", children: [
45
{name: "Item 2-1-1", value: 2100},
46
{name: "Item 2-1-2", value: 1000},
47
{name: "Item 2-1-3", value: 800},
48
{name: "Item 2-1-4", value: 750}
49
]},
50
{name: "Item 2-2", children: [
51
{name: "Item 2-2-1", value: 560},
52
{name: "Item 2-2-2", value: 300},
53
{name: "Item 2-2-3", value: 150},
54
{name: "Item 2-2-4", value: 90}
55
]},
56
{name: "Item 2-3", value: 400}
57
]},
58
{name: "Item 3", children: [
59
{name: "Item 3-1", children: [
60
{name: "Item 3-1-1", value: 850},
61
{name: "Item 3-1-2", value: 400},
62
{name: "Item 3-1-3", value: 150}
63
]},
64
{name: "Item 3-2", value: 1350},
65
{name: "Item 3-3", value: 1300},
66
{name: "Item 3-4", children: [
67
{name: "Item 3-4-1", value: 400},
68
{name: "Item 3-4-2", value: 300},
69
{name: "Item 3-4-3", value: 250},
70
{name: "Item 3-4-4", value: 150}
71
]}
72
]}
73
]}
74
];
75
return data;
76
}