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
var firstDataSet = anychart.data.set([
10
{id: "AU.NT", value: 64, title: "Northern Territory"},
11
{id: "AU.TS", value: 28, title: "Tasmania"},
12
]);
13
14
var secondDataSet = anychart.data.set([
15
{id: "AU.WA", value: 86, title: "Western Australia"},
16
{id: "AU.SA", value: 45, title: "South Australian"}
17
18
]);
19
20
var thirdDataSet = anychart.data.set([
21
{id: "AU.QL", value: 16, title: "Queensland"},
22
{id: "AU.NS", value: 32, title: "New South Wales"}
23
]);
24
25
var forthDataSet = anychart.data.set([
26
{id: "AU.CT", value: 15, title: "Australian Capital Territory"},
27
{id: "AU.VI", value: 23, title: "Victoria"}
28
]);
29
30
var firstDataSetForSeries = firstDataSet.mapAs({id: "id"});
31
var secondDataSetForSeries = secondDataSet.mapAs({id: "id"});
32
var thirdDataSetForSeries = thirdDataSet.mapAs({id: "id"});
33
var forthDataSetForSeries = thirdDataSet.mapAs({id: "id"});
34
35
var australiaMap = anychart.map();
36
australiaMap.geoData(anychart.maps.australia);
37
38
// Creates palette
39
var myPalette = anychart.palettes.rangeColors();
40
myPalette.items(["#B2DFDB", "#00796B"]);
41
myPalette.count(4);
42
43
// Sets palette.
44
australiaMap.palette(myPalette);
45
46
australiaMap.choropleth(firstDataSetForSeries);
47
australiaMap.choropleth(secondDataSetForSeries);
48
australiaMap.choropleth(thirdDataSetForSeries);
49
australiaMap.choropleth(forthDataSetForSeries);
50
51
australiaMap.container("container");
52
australiaMap.draw();
53
});