HTMLcopy
1
<label><input onclick="displayMode('always-show')" type="radio" name="mode">Always Show</label>
2
<label><input onclick="displayMode('clip')" type="radio" name="mode">Clip</label>
3
<label><input onclick="displayMode('drop')" type="radio" name="mode" checked>Drop</label>
4
<div id="container"></div>
CSScopy
16
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
label {
8
display: inline-block;
9
margin: 10px 0 0 10px;
10
}
11
#container {
12
position: absolute;
13
width: 100%;
14
top: 35px;
15
bottom: 0;
16
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
var data = [
5
{name: "Slavic Languages", children: [
6
{name: "East Slavic", children: [
7
{name: "Russian", value: 150000000},
8
{name: "Ukrainian", value: 45000000},
9
{name: "Belarusian", value: 3200000}
10
]},
11
{name: "West Slavic", children: [
12
{name: "Polish", value: 55000000},
13
{name: "Czech", value: 10600000},
14
{name: "Slovak", value: 5200000}
15
]},
16
{name: "South Slavic", children: [
17
{name: "Serbo-Croatian", value: 21000000},
18
{name: "Bulgarian", value: 9000000},
19
{name: "Slovene", value: 2500000},
20
{name: "Macedonian", value: 1400000}
21
]}
22
]}
23
];
24
25
// create a chart and set the data
26
chart = anychart.treeMap(data, "as-tree");
27
28
// set the maximum depth of levels shown
29
chart.maxDepth(3);
30
31
// configure the font of headers
32
chart.headers().fontSize("30");
33
34
// set the display mode of headers
35
chart.headersDisplayMode("drop");
36
37
// set the chart title
38
chart.title().useHtml(true);
39
chart.listen("chartDraw", function () {
40
chart.title("Treemap: Headers (Display Mode = " +
41
chart.headersDisplayMode() + ")<br><br>" +
42
"<span style='font-size:12; font-style:italic'>" +
43
"Slavic Languages by Number of Speakers</span>");
44
});
45
46
// set the container id
47
chart.container("container");
48
49
// initiate drawing the chart
50
chart.draw();
51
});
52
53
// set the display mode of headers
54
function displayMode(mode) {
55
chart.headersDisplayMode(mode);
56
}