HTMLcopy
1
<button onclick="headersEnabled(false)">Disable Headers</button>
2
<button onclick="headersEnabled(true)">Enable Headers</button>
3
<div id="container"></div>
CSScopy
15
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
button {
8
margin: 10px 0 0 10px;
9
}
10
#container {
11
position: absolute;
12
width: 100%;
13
top: 35px;
14
bottom: 0;
15
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
// create data
3
var data = [
4
{name: "Slavic Languages", children: [
5
{name: "East Slavic", children: [
6
{name: "Russian", value: 150000000},
7
{name: "Ukrainian", value: 45000000},
8
{name: "Belarusian", value: 3200000}
9
]},
10
{name: "West Slavic", children: [
11
{name: "Polish", value: 55000000},
12
{name: "Czech", value: 10600000},
13
{name: "Slovak", value: 5200000}
14
]},
15
{name: "South Slavic", children: [
16
{name: "Serbo-Croatian", value: 21000000},
17
{name: "Bulgarian", value: 9000000},
18
{name: "Slovene", value: 2500000},
19
{name: "Macedonian", value: 1400000}
20
]}
21
]}
22
];
23
24
// create a chart and set the data
25
chart = anychart.treeMap(data, "as-tree");
26
27
// set the maximum depth of levels shown
28
chart.maxDepth(3);
29
30
// configure the text of headers in the hovered state
31
chart.hovered().headers().format("{%value}");
32
33
// configure the font of headers
34
chart.normal().headers().fontColor("#990000");
35
chart.normal().headers().fontSize("14");
36
chart.normal().headers().fontWeight('bold');
37
chart.hovered().headers().fontColor("#000099");
38
39
// set the chart title
40
chart.title().useHtml(true);
41
chart.title("Treemap: Headers<br><br>" +
42
"<span style='font-size:12; font-style:italic'>" +
43
"Slavic Languages by Number of Speakers</span>");
44
45
// set the container id
46
chart.container("container");
47
48
// initiate drawing the chart
49
chart.draw();
50
});
51
52
// enable / disable headers
53
function headersEnabled(enabled) {
54
chart.headers(enabled);
55
}