HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
var chart;
2
anychart.onDocumentReady(function () {
3
var rawData = [
4
{ id: 'group1', name: 'Group 1' },
5
{ id: 'group2', name: 'Group 2' },
6
{ id: 'group3', name: 'Group 3' },
7
{ id: 'group4', name: 'Group 4' },
8
9
{ id: 'subgroup11', name: 'Subgroup 1.1', parent: 'group1', value: 2 },
10
{ id: 'subgroup12', name: 'Subgroup 1.2', parent: 'group1', value: 9 },
11
{ id: 'subgroup13', name: 'Subgroup 1.3', parent: 'group1', value: 3 },
12
13
{ id: 'subgroup21', name: 'Subgroup 2.1', parent: 'group2', value: 1 },
14
{ id: 'subgroup22', name: 'Subgroup 2.2', parent: 'group2', value: 4 },
15
{ id: 'subgroup23', name: 'Subgroup 2.3', parent: 'group2', value: 2 },
16
{ id: 'subgroup24', name: 'Subgroup 2.4', parent: 'group2', value: 2 },
17
{ id: 'subgroup25', name: 'Subgroup 2.5', parent: 'group2', value: 1 },
18
19
{ id: 'subgroup31', name: 'Subgroup 3.1', parent: 'group3' },
20
{ id: 'subgroup32', name: 'Subgroup 3.2', parent: 'group3', value: 1 },
21
22
{ id: 'subgroup311', name: 'Subgroup 3.1.1', parent: 'subgroup31', value: 4 },
23
{ id: 'subgroup312', name: 'Subgroup 3.1.2', parent: 'subgroup31', value: 2 },
24
25
{ id: 'subgroup41', name: 'Subgroup 4.1', parent: 'group4', value: 1 },
26
{ id: 'subgroup42', name: 'Subgroup 4.2', parent: 'group4', value: 3 },
27
{ id: 'subgroup43', name: 'Subgroup 4.3', parent: 'group4', value: 2 },
28
{ id: 'subgroup44', name: 'Subgroup 4.4', parent: 'group4', value: 1 }
29
];
30
31
var treeData = anychart.data.tree(rawData, 'as-table');
32
chart = anychart.circlePacking(treeData);
33
34
chart.labelsMode('leaves');
35
36
chart.normal().labels().format(function () {
37
return this.name.split(' ')[1];
38
});
39
40
chart.normal().labels().textShadow('none').fontColor('#000000').fontSize(10);
41
42
chart.palette(['#80cbc4', '#aed581', '#e6ee9c', '#ffcc80', '#ffab91']);
43
44
chart.title('Set labelsMode to "leaves"')
45
chart.container('container');
46
chart.draw();
47
});