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: "Andorra", value: 57600000, custom_field: "info 1", children: [
6
{name: "Machines", value: 22400000, custom_field: "info 2", children: [
7
{name: "Integrated Circuits", value: 12200000, custom_field: "info 7"},
8
{name: "Blank Audio Media", value: 2500000, custom_field: "info 8"},
9
{name: "Computers", value: 1100000, custom_field: "info 9"}
10
]},
11
{name: "Instruments", value: 9750000, custom_field: "info 3", children: [
12
{name: "Orthopedic Appliances", value: 8900000, custom_field: "info 10"}
13
]},
14
{name: "Chemical Products", value: 4740000, custom_field: "info 4", children: [
15
{name: "Essential Oils", value: 3690000, custom_field: "info 11"},
16
{name: "Beauty Products", value: 423000, custom_field: "info 12"}
17
]},
18
{name: "Mineral Products", value: 4540000, custom_field: "info 5", children: [
19
{name: "Coal Briquettes", value: 4280000, custom_field: "info 13"}
20
]},
21
{name: "Transportation", value: 4060000, custom_field: "info 6", children: [
22
{name: "Cars", value: 2870000, custom_field: "info 14"},
23
{name: "Vehicle Parts", value: 640000, custom_field: "info 15"}
24
]}
25
]}
26
];
27
28
// create a chart and set the data
29
var chart = anychart.sunburst(data, "as-tree");
30
31
// set the calculation mode
32
chart.calculationMode("parent-dependent");
33
34
// enable HTML for labels
35
chart.labels().useHtml(true);
36
37
// configure labels
38
chart.labels().format(function() {
39
var sales = Math.round(this.value/100000)/10;
40
return "<span style='font-weight:bold'>" + this.name +
41
"</span><br/>" + sales + " mln";
42
});
43
44
// configure labels of leaves
45
chart.leaves().labels().format(function() {
46
var sales = Math.round(this.value/100000)/10;
47
return sales + " mln";
48
});
49
50
// configure tooltips
51
chart.tooltip().format(function() {
52
var sales = Math.round(this.value/100000)/10;
53
return this.name + "\n\nsales: " + sales +
54
" mln\n" + this.getData("custom_field");
55
});
56
57
// set the chart title
58
chart.title().useHtml(true);
59
chart.title("Sunburst: Labels and Tooltips (Formatting Functions)<br><br>" +
60
"<span style='font-size:12; font-style:italic'>" +
61
"Export Sales</span>");
62
63
// set the container id
64
chart.container("container");
65
66
// initiate drawing the chart
67
chart.draw();
68
});