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
var dataSet = anychart.data.set([
2
{id: 'US-MN', name: "Minnesota", 'value': 8.4},
3
{id: 'US-MT', name: "Montana", 'value': 8.5},
4
{id: 'US-ND', name: "North Dakota", 'value': 5.1},
5
{id: 'US-ID', name: "Idaho", 'value': 8.0},
6
{id: 'US-WA', name: "Washington", 'value': 13.1},
7
{id: 'US-AZ', name: "Arizona", 'value': 9.7},
8
{id: 'US-CA', name: "California", 'value': 14.0},
9
{id: 'US-CO', name: "Colorado", 'value': 8.7},
10
]);
11
12
anychart.onDocumentReady(function() {
13
var map = anychart.map();
14
15
//set map Geo data
16
map.geoData(anychart.maps.usa_mainland);
17
18
var colorRange = map.colorRange();
19
colorRange.enabled(true);
20
colorRange.labels().padding(3);
21
22
colorRange.stroke('#B9B9B9');
23
colorRange.ticks().stroke('#B9B9B9').position('outside').length(10).enabled(true);
24
colorRange.minorTicks().stroke('#B9B9B9').position('outside').length(5).enabled(true);
25
colorRange.marker().fill('#D98026').offsetY(0);
26
27
var series = map.choropleth(dataSet);
28
series.geoIdField('iso_3166_2');
29
series.colorScale(anychart.scales.linearColor());
30
series.hoverFill('#FF9933');
31
series.name('Sales of ACME Corp.');
32
series.hoverStroke(anychart.color.darken('#F79430'));
33
series.selectFill('#663300');
34
series.selectStroke(anychart.color.darken('#663300'));
35
series.labels().fontSize(10).fontColor('#212121').format(function(){
36
return this.value;
37
});
38
series.tooltip().textWrap('byLetter').useHtml(true);
39
series.tooltip().format(function() {
40
return '<span style="font-size: 13px">' + this.value + ' litres per capita</span>';
41
});
42
series.colorScale(anychart.scales.linearColor('#E08529', '#753D05'));
43
44
45
// some legend settings
46
map.legend(true);
47
series.legendItem().iconFill('#D98026');
48
series.legendItem().iconType("circle");
49
50
map.container('container');
51
map.draw();
52
});