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
// This sample uses 3rd party proj4 component
4
// that makes it possible to set coordinates
5
// for the points and labels on the map and
6
// required for custom projections and grid labels formatting.
7
// See https://docs.anychart.com/Maps/Map_Projections
8
9
// create data set
10
var data = [
11
{'id': 'AU.NS', 'size': 7565500, 'name': 'New South Wales'},
12
{'id': 'AU.NT', 'size': 243700, 'name': 'Northern Territory'},
13
{'id': 'AU.WA', 'size': 2565600, 'name': 'Western Australia'},
14
{'id': 'AU.SA', 'size': 1682600, 'name': 'South Australia'},
15
{'id': 'AU.VI', 'size': 5866300, 'name': 'Victoria'},
16
{'id': 'AU.QL', 'size': 4750500, 'name': 'Queensland'},
17
{'id': 'AU.TS', 'size': 514700, 'name': 'Tasmania'}
18
];
19
20
// create map chart
21
var map = anychart.map();
22
23
// set geodata using https://cdn.anychart.com/geodata/2.2.0/countries/australia/australia.js
24
map.geoData(anychart.maps.australia);
25
26
//create bubble series
27
var series = map.bubble(data);
28
29
// changes the fill and hoverFill colors
30
series.fill("#90caf9");
31
series.hovered().fill("#b3e5fc");
32
series.labels().fontColor("#0277bd");
33
series.hovered().labels().fontColor("#01579b");
34
35
// changes the stroke and hoverStroke colors
36
series.stroke("#64b5f6");
37
series.hovered().stroke("#81d4fa");
38
39
// sets the select colors
40
series.selected().stroke("#546e7a");
41
series.selected().fill("#78909c");
42
series.selected().labels().fontColor("#263238");
43
44
// set the maximum size of the bubble
45
map.maxBubbleSize('10%');
46
47
// set the minimum size of the bubble
48
map.minBubbleSize('2%');
49
50
series.labels(true);
51
52
// set the color for the text of the labels
53
series.labels().fontColor('black');
54
series.labels().fontSize(10);
55
56
// format the labels
57
series.labels().format("{%name}\n{%size}");
58
series.labels().anchor('center');
59
series.labels().position('center');
60
61
series.tooltip().format('{%size} employed local workers');
62
63
// set container id for the chart
64
map.container('container');
65
66
// initiate chart drawing
67
map.draw();
68
});