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, children: [
6
{name: "Machines", value: 22400000, children: [
7
{name: "Integrated Circuits", value: 12200000},
8
{name: "Blank Audio Media", value: 2500000},
9
{name: "Computers", value: 1100000}
10
]},
11
{name: "Instruments", value: 9750000, children: [
12
{name: "Orthopedic Appliances", value: 8900000}
13
]},
14
{name: "Chemical Products", value: 4740000, children: [
15
{name: "Essential Oils", value: 3690000},
16
{name: "Beauty Products", value: 423000}
17
]},
18
{name: "Mineral Products", value: 4540000, children: [
19
{name: "Coal Briquettes", value: 4280000}
20
]},
21
{name: "Transportation", value: 4060000, children: [
22
{name: "Cars", value: 2870000},
23
{name: "Vehicle Parts", value: 640000}
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
// set the chart title
35
chart.title().useHtml(true);
36
chart.title("Sunburst: Calculation Mode (parent-dependent)<br><br>" +
37
"<span style='font-size:12; font-style:italic'>" +
38
"Export Sales</span>");
39
40
// set the container id
41
chart.container("container");
42
43
// initiate drawing the chart
44
chart.draw();
45
});