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
var dataSet_other = anychart.data.set([
13
{id: 'US-UT', name: "Utah", 'value': 17.5},
14
{id: 'US-WY', name: "Wyoming", 'value': 2.8},
15
{id: 'US-AR', name: "Arkansas", 'value': 6.1},
16
{id: 'US-IA', name: "Iowa", 'value': 5.7},
17
{id: 'US-KS', name: "Kansas", 'value': 7.2},
18
{id: 'US-MO', name: "Missouri", 'value': 16.9},
19
{id: 'US-NV', name: "Nevada", 'value': 14.7},
20
{id: 'US-NM', name: "New Mexico", 'value': 6.9},
21
{id: 'US-OR', name: "Oregon", 'value': 12.2},
22
{id: 'US-NE', name: "Nebraska", 'value': 5.0},
23
{id: 'US-OK', name: "Oklahoma", 'value': 4.5},
24
{id: 'US-SD', name: "South Dakota", 'value': 5.0},
25
{id: 'US-LA', name: "Louisiana", 'value': 5.7},
26
{id: 'US-TX', name: "Texas", 'value': 5.0},
27
{id: 'US-CT', name: "Connecticut", 'value': 14.4, labels: false},
28
{id: 'US-MA', name: "Massachusetts", 'value': 16.9, labels: false},
29
{id: 'US-NH', name: "New Hampshire", 'value': 19.6},
30
{id: 'US-RI', name: "Rhode Island", 'value': 14.0, labels: false},
31
{id: 'US-VT', name: "Vermont", 'value': 17.5},
32
{id: 'US-AL', name: "Alabama", 'value': 6.0},
33
{id: 'US-FL', name: "Florida", 'value': 12.4},
34
{id: 'US-GA', name: "Georgia", 'value': 5.9},
35
{id: 'US-MS', name: "Mississippi", 'value': 2.8},
36
{id: 'US-SC', name: "South Carolina", 'value': 6.1},
37
{id: 'US-IL', name: "Illinois", 'value': 10.2},
38
{id: 'US-IN', name: "Indiana", 'value': 6.1},
39
{id: 'US-KY', name: "Kentucky", 'value': 3.9},
40
{id: 'US-NC', name: "North Carolina", 'value': 6.6},
41
{id: 'US-OH', name: "Ohio", 'value': 7.2},
42
{id: 'US-TN', name: "Tennessee", 'value': 5.4},
43
{id: 'US-VA', name: "Virginia", 'value': 10.7},
44
{id: 'US-WI', name: "Wisconsin", 'value': 9.1},
45
{id: 'US-WY', name: "Wyoming", 'value': 5.2, labels: false},
46
{id: 'US-WV', name: "West Virginia", 'value': 2.4},
47
{id: 'US-DE', name: "Delaware", 'value': 13.5, labels: false},
48
{id: 'US-DC', name: "District of Columbia", 'value': 25.7, labels: false},
49
{id: 'US-MD', name: "Maryland", 'value': 8.9, labels: false},
50
{id: 'US-NJ', name: "New Jersey", 'value': 14.9, labels: false},
51
{id: 'US-NY', name: "New York", 'value': 11.9},
52
{id: 'US-PA', name: "Pennsylvania", 'value': 5.6},
53
{id: 'US-ME', name: "Maine", 'value': 10.4},
54
{id: 'US-MI', name: "Michigan", 'value': 7.6}
55
]);
56
57
anychart.onDocumentReady(function() {
58
map = anychart.map();
59
60
//set map Geo data
61
map.geoData(anychart.maps.usa_mainland);
62
63
var colorRange = map.colorRange();
64
colorRange.enabled(true);
65
colorRange.labels().padding(3);
66
67
colorRange.stroke('#B9B9B9');
68
colorRange.ticks().stroke('#B9B9B9').position('outside').length(10).enabled(true);
69
colorRange.minorTicks().stroke('#B9B9B9').position('outside').length(5).enabled(true);
70
colorRange.marker().fill('#D98026').offsetY(0);
71
72
var series = map.choropleth(dataSet);
73
series.geoIdField('iso_3166_2');
74
series.colorScale(anychart.scales.linearColor());
75
series.hoverFill('#FF9933');
76
series.name('Sales of ACME Corp.');
77
series.hoverStroke(anychart.color.darken('#F79430'));
78
series.selectFill('#663300');
79
series.selectStroke(anychart.color.darken('#663300'));
80
series.labels().fontSize(10).fontColor('#212121').format(function(){
81
return (this.name+'\n'+this.value);
82
});
83
series.tooltip().textWrap('byLetter').useHtml(true);
84
series.tooltip().format(function() {
85
return '<span style="font-size: 13px">' + '$ ' + this.value + 'm </span>';
86
});
87
series.colorScale(anychart.scales.linearColor('#E08529', '#753D05'));
88
89
90
// second series
91
var series_other = map.choropleth(dataSet_other);
92
series_other.geoIdField('iso_3166_2');
93
series_other.name('Sales of other companies');
94
series_other.labels().fontSize(10).fontColor('#212121').format(function(){
95
return (this.value);
96
});
97
series_other.tooltip().textWrap('byLetter').useHtml(true);
98
series_other.tooltip().format(function() {
99
return '<span style="font-size: 13px">' + '$ ' + this.value + 'm </span>';
100
});
101
102
var scale = anychart.scales.ordinalColor([
103
{less: 5},
104
{from: 5, to: 10},
105
{greater: 10}
106
]);
107
108
scale.colors(['#73E6BF', '#54D1B5', '#26B2A6']);
109
110
series_other.colorScale(scale);
111
112
// some legend settings
113
map.legend(true);
114
var legend = map.legend();
115
legend.itemsSourceMode('CATEGORIES');
116
117
map.container('container');
118
map.draw();
119
});