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/7.14.3/Maps/Map_Projections
8
9
// create data set
10
var dataSet = anychart.data.set([
11
{'id': 'AU.NS', 'size': 7565500, 'fill': "red", hoverFill: "#FF6666", selectFill: "#800000"},
12
{'id': 'AU.NT', 'size': 243700, 'fill': "green", hoverFill:"#80B280", selectFill: "#003300"},
13
{'id': 'AU.WA', 'size': 2565600},
14
{'id': 'AU.SA', 'size': 1682600},
15
{'id': 'AU.VI', 'size': 5866300},
16
{'id': 'AU.QL', 'size': 4750500},
17
{'id': 'AU.TS', 'size': 514700}
18
]);
19
20
// create map chart
21
var map = anychart.map();
22
23
// set geodata using https://cdn.anychart.com/geodata/1.2.0/countries/australia/australia.js
24
map.geoData(anychart.maps.australia);
25
26
//create bubble series
27
var series = map.bubble(dataSet);
28
29
// set container id for the chart
30
map.container('container');
31
32
// initiate chart drawing
33
map.draw();
34
});