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
$('#container').append('<div class="title">' +
3
'<h1>Race Village</h1>' +
4
'<p>(draw chart in <a href="https://cdn.anychart.com/svg-data/seat-map/race-village.svg"' +
5
'target="_blank">SVG data</a>)</p>' + '</div>');
6
7
var stage = anychart.graphics.create("container");
8
9
$.ajax({
10
type: 'GET',
11
url: 'https://cdn.anychart.com/svg-data/seat-map/race-village.svg',
12
success: function (data) {
13
14
// Creates seat map.
15
var chart = anychart.seatMap([
16
{id: 'race-office', value: 'Race office'},
17
{id: 'bike-service', value: 'Bike service'},
18
{id: 'feed-zone', value: 'Feed zone'},
19
{id: 'reward-zone', value: 'Reward zone'},
20
{id: 'starting-zone', value: 'Starting sectors'}
21
]);
22
23
// Set SVG data.
24
chart.geoData(data);
25
chart.unboundRegions("as-is");
26
27
var series = chart.getSeries(0);
28
series.fill(function () {
29
var attr = this.attributes;
30
if (attr) {
31
// Attributes in svg.file
32
var class_ = attr.class;
33
switch (class_) {
34
case 'race-office' :
35
return '#95C8EC';
36
case 'bike-service' :
37
return '#FECC81';
38
case 'feed-zone' :
39
return '#AED580';
40
case 'reward-zone' :
41
return '#F8AA92';
42
case 'starting-zone' :
43
return '#D1C3E0';
44
default:
45
return this.sourceColor;
46
}
47
}
48
});
49
50
var tooltip = series.tooltip();
51
tooltip.titleFormat(function () {
52
return this.value
53
});
54
tooltip.title({useHtml: true});
55
56
tooltip.format(function () {
57
return this.regionProperties.description;
58
});
59
60
chart.container(stage);
61
chart.draw();
62
}
63
});
64
});