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: "European Union", children: [
6
{name: "Belgium", value: 11443830, capital: "Brussels" },
7
{name: "France", value: 64938716, capital: "Paris" },
8
{name: "Germany", value: 80636124, capital: "Berlin" },
9
{name: "Greece", value: 10892931, capital: "Athens" },
10
{name: "Italy", value: 59797978, capital: "Rome" },
11
{name: "Netherlands", value: 17032845, capital: "Amsterdam"},
12
{name: "Poland", value: 38563573, capital: "Warsaw" },
13
{name: "Romania", value: 19237513, capital: "Bucharest"},
14
{name: "Spain", value: 46070146, capital: "Madrid" },
15
{name: "United Kingdom", value: 65511098, capital: "London" }
16
]}
17
];
18
19
// create a chart and set the data
20
var chart = anychart.treeMap(data, "as-tree");
21
22
// enable HTML for labels
23
chart.labels().useHtml(true);
24
25
// configure labels
26
chart.labels().format(function() {
27
var population = Math.round(this.value/100000)/10;
28
return "<span style='font-weight:bold'>" + this.name +
29
"</span><br>" + population + " mln";
30
});
31
32
// configure tooltips
33
chart.tooltip().format(function() {
34
var population = Math.round(this.value/100000)/10;
35
return "population: " + population +
36
" mln\ncapital: " + this.getData("capital");
37
});
38
39
// set the chart title
40
chart.title().useHtml(true);
41
chart.title("Treemap: Labels and Tooltips (Formatting Functions)<br><br>" +
42
"<span style='font-size:12; font-style:italic'>" +
43
"Top 10 European Union Countries by Population</span>");
44
45
// set the container id
46
chart.container("container");
47
48
// initiate drawing the chart
49
chart.draw();
50
});