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: "East Slavic", children: [
6
{name: "Russian", value: 150000000, country: "Russia" },
7
{name: "Ukrainian", value: 45000000, country: "Ukraine" },
8
{name: "Belarusian", value: 3200000, country: "Belarus" }
9
]},
10
{name: "West Slavic", children: [
11
{name: "Polish", value: 55000000, country: "Poland" },
12
{name: "Czech", value: 10600000, country: "Czech Republic" },
13
{name: "Slovak", value: 5200000, country: "Slovakia" }
14
]},
15
{name: "South Slavic", children: [
16
{name: "Serbo-Croatian", value: 21000000, country: "Serbia, Croatia"},
17
{name: "Bulgarian", value: 9000000, country: "Bulgaria" },
18
{name: "Slovene", value: 2500000, country: "Slovenia" },
19
{name: "Macedonian", value: 1400000, country: "Macedonia" }
20
]}
21
];
22
23
// create a chart and set the data
24
var chart = anychart.circlePacking(data, "as-tree");
25
26
// enable HTML for labels
27
chart.labels().useHtml(true);
28
29
// configure labels
30
chart.labels().format(function() {
31
var numberOfSpeakers = Math.round(this.value/100000)/10;
32
return this.name + "<span style='font-weight:bold'><br>" +
33
numberOfSpeakers + " mln";
34
});
35
36
// enable HTML for labels
37
chart.labels().useHtml(true);
38
39
// configure labels
40
chart.labels().format(
41
"{%name}<br><span style='font-weight:bold'>{%value}</span>"
42
);
43
44
// configure tooltips
45
chart.tooltip().format(
46
"number of speakers: {%value}\ncountry: {%country}"
47
);
48
49
50
// set the chart title
51
chart.title().useHtml(true);
52
chart.title("Circle Packing: Labels and Tooltips (Tokens)<br><br>" +
53
"<span style='font-size:12; font-style:italic'>" +
54
"Slavic Languages by Number of Speakers</span>");
55
56
// set the container id
57
chart.container("container");
58
59
// initiate drawing the chart
60
chart.draw();
61
});