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
var data = getData();
3
4
var chart = anychart.sunburst(data, 'as-table');
5
chart.innerRadius('25%');
6
chart.calculationMode('ordinal-from-root');
7
8
var label = anychart.standalones.label();
9
label.enabled(true);
10
label.text('Activities');
11
label.width('100%');
12
label.height('100%');
13
label.fontSize(30);
14
label.fontColor('#60727b');
15
label.hAlign('center');
16
label.vAlign('middle');
17
label.adjustFontSize(true);
18
19
// Get and modify chart center content.
20
var center = chart.center();
21
center.content(label);
22
23
chart.title('Get and modify center content');
24
chart.container('container');
25
chart.draw();
26
});
27
function getData() {
28
return [
29
{name: 'Winter', parent: null, id: 'winter', value: 250},
30
{name: 'Spring', parent: null, id: 'spring', value: 250},
31
{name: 'Summer', parent: null, id: 'summer', value: 250},
32
{name: 'Autumn', parent: null, id: 'autumn', value: 250},
33
{name: 'Running', parent: 'winter', id: 'run', value: 43},
34
{name: 'Snowboarding', parent: 'winter', id: 'snowboard', value: 50},
35
{name: 'Nordic Skiing', parent: 'winter', id: 'nordic', value: 50},
36
{name: 'Working Out', parent: 'winter', id: 'workout', value: 30},
37
{name: 'Ice Skating', parent: 'winter', id: 'iceskate', value: 40},
38
{name: 'Kitesurfing', parent: 'winter', id: 'kitesurf', value: 37},
39
{name: 'Riding', parent: 'spring', id: 'ride', value: 100},
40
{name: 'Crossfit', parent: 'spring', id: 'crossfit', value: 30},
41
{name: 'Hiking', parent: 'spring', id: 'hike', value: 30},
42
{name: 'Yoga', parent: 'spring', id: 'yoga', value: 40},
43
{name: 'Running', parent: 'spring', id: 'run', value: 50},
44
{name: 'Riding', parent: 'summer', id: 'ride', value: 150},
45
{name: 'Windsurfing', parent: 'summer', id: 'windsurf', value: 20},
46
{name: 'Swimming', parent: 'summer', id: 'swim', value: 30},
47
{name: 'Roller Skiing', parent: 'summer', id: 'roller', value: 10},
48
{name: 'Rowing', parent: 'summer', id: 'rowing', value: 40},
49
{name: 'Riding', parent: 'autumn', id: 'ride', value: 90},
50
{name: 'Hiking', parent: 'autumn', id: 'windsurf', value: 20},
51
{name: 'Swimming', parent: 'autumn', id: 'swim', value: 10},
52
{name: 'Nordic Skiing', parent: 'autumn', id: 'nordic', value: 40},
53
{name: "Climbing", parent: "autumn", id: "climbing", value: 40}
54
];
55
}