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 data
4
var data = [
5
{name: "Root", children: [
6
{name: "Parent 1", children: [
7
{name: "Child 1-1", value: 150000000},
8
{name: "Child 1-2", value: 45000000},
9
{name: "Child 1-3", value: 3200000}
10
]},
11
{name: "Parent 2", children: [
12
{name: "Child 2-1", value: 55000000},
13
{name: "Child 2-2", value: 10600000},
14
{name: "Child 2-3", value: 5200000}
15
]},
16
{name: "Parent 3", children: [
17
{name: "Child 3-1", value: 21000000},
18
{name: "Child 3-2", value: 9000000}
19
]}
20
]}
21
];
22
23
// create a data tree
24
var treeData = anychart.data.tree(data, "as-tree");
25
26
// create a chart and set the data
27
var chart = anychart.treeMap(treeData);
28
29
// set the maximum depth of levels shown
30
chart.maxDepth(2);
31
32
// set the chart title
33
chart.title("Tree Data Model: Tree Structure");
34
35
// set the container id
36
chart.container("container");
37
38
// initiate drawing the chart
39
chart.draw();
40
});