HTMLcopy
1
<button onclick="label();">Apply changes (add labels)</button>
2
<button onclick="autoRedraw();">Draw changes on the chart</button>
3
<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
var chart;
2
anychart.onDocumentReady(function () {
3
chart = anychart.wordtree(getData());
4
chart.title('Disable redrawing of the chart after the changes. \n Use the buttons to apply the changes and draw them');
5
chart.container('container');
6
chart.draw();
7
8
// Disable chart redrawing.
9
chart.autoRedraw(false);
10
});
11
12
function autoRedraw() {
13
14
// Enable chart redrawing.
15
chart.autoRedraw(true);
16
}
17
18
var counter = 0;
19
20
function label() {
21
chart.label(counter++, {enabled: true, offsetY: 10 * counter++, fontWeight: 600, fontColor: 'rgba(' + Math.floor(Math.random() * 130).toString(10) + ','
22
+ Math.floor(Math.random() * 140).toString(10) + ','
23
+ Math.floor(Math.random() * 150).toString(10) + ')'});
24
}
25
26
function getData() {
27
return [
28
'Earth is round',
29
'Earth is the third planet from the Sun',
30
'Earth goes around the Sun',
31
'Earth has one satellite',
32
'Earth has a radius of 6 371 km',
33
'Earth is less than the Sun',
34
'Earth is less than the Jupiter',
35
'Earth is less than the Saturn',
36
'Earth is less than the Uranus',
37
'Earth is less than the Neptune',
38
'Earth is bigger than the Venus',
39
'Earth is bigger than the Mars',
40
'Earth is bigger than the Mercury',
41
'Earth has a powerful magnetic field'
42
]
43
}