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
// svgImage as string
3
4
svgImage = '<svg xmlns="https://www.w3.org/2000/svg">' +
5
'<g data-ac-wrapper-id="3">' +
6
'<circle id="1" cx="50" cy="50" r="20" fill="#90caf9" stroke="black"></circle>' +
7
'<circle id="2" cx="150" cy="50" r="20" fill="#80cbc4" stroke="black"></circle>' +
8
'<circle id="3" cx="100" cy="100" r="20" fill="#aed581" stroke="black"></circle>' +
9
'</g></svg>';
10
11
// sample data
12
var dataSet = anychart.data.set([
13
['1', 300],
14
['2', 230]
15
]);
16
17
// mapping the data to the chart
18
mapDataSet = dataSet.mapAs({id: 0, value: 1});
19
20
var map = anychart.map();
21
map.geoData(svgImage);
22
23
map.title('SVG Sample Map');
24
25
// set the series
26
var series = map.choropleth(mapDataSet);
27
series.geoIdField('id');
28
29
// disable the labels
30
series.labels(false);
31
32
// draw a map
33
map.container('container');
34
map.draw();
35
});