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 dataSet = anychart.data.set([
10
{'id': 'AU.WA', 'value': 320}, // Western Australia
11
{'id': 'AU.JB', 'value': 270}, // Jervis Bay Territory
12
{'id': 'AU.NS', 'value': 240}, // New South Wales
13
{'id': 'AU.VI', 'value': 75}, // Victoria
14
{'id': 'AU.NT', 'value': 130}, // Northern Territory
15
{'id': 'AU.TS', 'value': 190}, // Tasmania
16
{'id': 'AU.CT', 'value': 100}, // Australian Capital Territory
17
{'id': 'AU.SA', 'value': 280}, // South Australia
18
{'id': 'AU.QL', 'value': 220} // Queensland
19
]);
20
21
// create map
22
var map = anychart.map();
23
map.geoData(anychart.maps.australia);
24
25
// set the title and its preferences
26
map.title("Blended progression with Linear Color Scale");
27
28
// set the series
29
var series = map.choropleth(dataSet);
30
31
// disable the labels
32
series.labels(false);
33
34
// set the colors and ranges for the scale
35
series.colorScale(anychart.scales.linearColor());
36
37
//set the single hue progression
38
var colors = anychart.color.blendedHueProgression('#C8F672', '#273813');
39
40
// define the colors
41
series.colorScale().colors(colors);
42
43
// enable the colorRange
44
map.colorRange(true);
45
46
// stroke disable
47
series.stroke("2 white 0");
48
49
// set the container
50
map.container('container');
51
map.draw();
52
});