HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
// The data used in this sample can be obtained from the CDN
3
// https://cdn.anychart.com/samples/maps-connectors/top-chinese-exports-to-the-world/data.json
4
anychart.data.loadJsonFile(
5
'https://cdn.anychart.com/samples/maps-connectors/top-chinese-exports-to-the-world/data.json',
6
function (data) {
7
// Creates map chart
8
var map = anychart.connector();
9
10
// Sets settings for map chart
11
map.padding([10, 10, 10, 10]);
12
map.geoData('anychart.maps.world');
13
map.interactivity().selectionMode('none');
14
15
map
16
.unboundRegions()
17
.enabled(true)
18
.fill('#E1E1E1')
19
.stroke('#D2D2D2');
20
21
// Sets title for map chart and customizes it
22
map
23
.title()
24
.enabled(true)
25
.useHtml(true)
26
.padding([0, 0, 20, 0])
27
.text(
28
'Top Chinese Export Directions to the World<br/>' +
29
'<span style="color:#212121; font-size: 13px;">According to www.worldsrichestcountries.com</span>'
30
);
31
32
// Sets credits data
33
map
34
.credits()
35
.enabled(true)
36
.url(
37
'http://www.worldsrichestcountries.com/top_china_exports.html'
38
)
39
.text(
40
'Data source: http://www.worldsrichestcountries.com/top_china_exports.html'
41
);
42
43
// Helper function to create several series
44
var createSeries = function (name, data, color) {
45
// Creates connector series for destinations and customizes them
46
var connectorSeries = map
47
.connector(data)
48
.name(name)
49
.fill(color)
50
.stroke('1.5 ' + color)
51
.curvature(0);
52
53
connectorSeries.hovered().stroke('1.5 #212121').fill('#212121');
54
55
connectorSeries
56
.markers()
57
.position('100%')
58
.size(20)
59
.fill(color)
60
.stroke('2 #E1E1E1');
61
62
connectorSeries
63
.hovered()
64
.markers()
65
.position('100%')
66
.size(20)
67
.fill('#212121')
68
.stroke('2 #455a64');
69
70
if (name === 'More then 10%') {
71
connectorSeries.startSize(7).endSize(2);
72
} else if (name === '5 - 10%') {
73
connectorSeries.startSize(5).endSize(1.5);
74
} else if (name === '3 - 5%') {
75
connectorSeries.startSize(3).endSize(1);
76
} else {
77
connectorSeries.startSize(0).endSize(0);
78
}
79
80
// Sets settings for labels for the destination series
81
connectorSeries
82
.labels()
83
.enabled(true)
84
.offsetY(0)
85
.offsetX(0)
86
.fontSize(10)
87
.position('100%')
88
.format(function () {
89
return this.getData('to');
90
});
91
92
connectorSeries
93
.hovered()
94
.labels()
95
.enabled(true)
96
.fontColor('#212121');
97
98
// Sets settings for legend items
99
connectorSeries
100
.legendItem()
101
.iconType('square')
102
.iconFill(color)
103
.iconStroke(false);
104
105
// Sets tooltip setting for the destination series
106
connectorSeries
107
.tooltip()
108
.useHtml(true)
109
.padding([8, 13, 10, 13])
110
.titleFormat('{%to}')
111
.fontSize(13)
112
.format(function () {
113
return (
114
'<span style="font-size: 12px; color: #cbcbcb">Total:</span> $' +
115
this.getData('total') +
116
' billion <br/>' +
117
'<span style="font-size: 12px; color: #cbcbcb">Overall Exports Percent:</span> ' +
118
this.getData('percent') +
119
'%'
120
);
121
});
122
};
123
124
// Creates Dataset from Sample data
125
var exportDataSet = anychart.data.set(data).mapAs();
126
127
// Creates 5 series, filtering the data by the amount of Fatalities
128
createSeries(
129
'Les then 0.5%',
130
exportDataSet.filter('percent', filterFunction(0, 0.5)),
131
'#64b5f6'
132
);
133
createSeries(
134
'0.5 - 1.5%',
135
exportDataSet.filter('percent', filterFunction(0.5, 1.5)),
136
'#1976d2'
137
);
138
createSeries(
139
'1.5 - 3%',
140
exportDataSet.filter('percent', filterFunction(1.5, 3)),
141
'#1976d2'
142
);
143
createSeries(
144
'3 - 5%',
145
exportDataSet.filter('percent', filterFunction(3, 5)),
146
'#355CB1'
147
);
148
createSeries(
149
'5 - 10%',
150
exportDataSet.filter('percent', filterFunction(5, 10)),
151
'#5C3883'
152
);
153
createSeries(
154
'More then 10%',
155
exportDataSet.filter('percent', filterFunction(10)),
156
'#880e4f'
157
);
158
159
// Turns on the legend for the sample
160
map
161
.legend()
162
.enabled(true)
163
.position('center-bottom')
164
.padding([20, 0, 0, 0])
165
.fontSize(10);
166
167
map
168
.legend()
169
.title()
170
.enabled(true)
171
.fontSize(13)
172
.padding([0, 0, 5, 0])
173
.text('Percent of Chinese Overall Exports');
174
175
// create zoom controls
176
var zoomController = anychart.ui.zoom();
177
zoomController.render(map);
178
179
// Sets container id for the chart
180
map.container('container');
181
182
// Initiates chart drawing
183
map.draw();
184
}
185
);
186
});
187
188
// Helper function to bind data field to the local var.
189
function filterFunction(val1, val2) {
190
if (val2) {
191
return function (fieldVal) {
192
return val1 <= fieldVal && fieldVal < val2;
193
};
194
}
195
return function (fieldVal) {
196
return val1 <= fieldVal;
197
};
198
}