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(
27
"<span style='font-weight:bold'>{%name}</span><br>{%value}"
28
);
29
30
// configure tooltips
31
chart.tooltip().format(
32
"population: {%value}\ncapital: {%capital}"
33
);
34
35
// set the chart title
36
chart.title().useHtml(true);
37
chart.title("Treemap: Labels and Tooltips (Tokens)<br><br>" +
38
"<span style='font-size:12; font-style:italic'>" +
39
"Top 10 European Union Countries by Population</span>");
40
41
// set the container id
42
chart.container("container");
43
44
// initiate drawing the chart
45
chart.draw();
46
});