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 stage = anychart.graphics.create("container");
3
4
var charts = [];
5
6
createCharts(charts, true);
7
8
createLabel("Rerender async", 20, function () {
9
disposeCharts(charts);
10
// Set rendering mode to async.
11
createCharts(charts, true);
12
});
13
14
createLabel("Rerender in sync", 150, function () {
15
disposeCharts(charts);
16
setTimeout(function () {
17
// Set rendering mode to sync.
18
createCharts(charts, false);
19
}, 100);
20
});
21
22
var customTitle = anychart.standalones.title();
23
customTitle.text("Set asynchronous/synchronous rendering for the charts");
24
customTitle.parentBounds(0, "50%", 100, 100);
25
customTitle.container(stage);
26
customTitle.draw();
27
28
function createCharts(charts, sync) {
29
for (var i = 0; i < 15; i++) {
30
for (var j = 2; j < 15; j++) {
31
pieChart = anychart.pie([20, 30, 50]);
32
pieChart.bounds(i * 10 + "%", j * 10 + "%", "10%", "10%");
33
pieChart.labels(false);
34
pieChart.legend(false);
35
pieChart.padding(0);
36
pieChart.margin(0);
37
pieChart.container(stage);
38
39
// Set render mode: true - async, false (default) - sync.
40
pieChart.draw(sync);
41
charts.push(pieChart);
42
}
43
}
44
}
45
46
function disposeCharts(charts) {
47
for (var i = 0; i < charts.length; i++) {
48
charts[i].dispose();
49
}
50
}
51
52
function createLabel(text, offset, action) {
53
var customLabel = anychart.standalones.label();
54
customLabel.text(text);
55
customLabel.parentBounds(offset, 30, 100, 100);
56
customLabel.listen("click", action);
57
customLabel.listen("mouseOver", function () {
58
document.body.style.cursor = "pointer";
59
});
60
customLabel.listen("mouseOut", function () {
61
document.body.style.cursor = "auto";
62
});
63
customLabel.background({fill: "#9E9E9E"});
64
customLabel.fontColor("#fff");
65
customLabel.padding(5);
66
customLabel.container(stage);
67
customLabel.draw();
68
}
69
});