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
// This sample uses 3rd party Proj4js JavaScript library to transform coordinates
3
// See https://docs.anychart.com/Maps/Map_Projections to learn more.
4
5
var stage = anychart.graphics.create('container');
6
7
var dataset1 = anychart.data.set([
8
{id: 'AU.CT', size: 15, title: 'Australian Capital Territory'},
9
{id: 'AU.VI', size: 23, title: 'Victoria'},
10
{id: 'AU.WA', size: 86, title: 'Western Australia'},
11
{id: 'AU.QL', size: 16, title: 'Queensland'},
12
{id: 'AU.NS', size: 32, title: 'New South Wales'},
13
{id: 'AU.NT', size: 64, title: 'Northern Territory'},
14
{id: 'AU.TS', size: 28, title: 'Tasmania'},
15
{id: 'AU.SA', size: 45, title: 'South Australian'}
16
]);
17
18
var dataset2 = anychart.data.set([
19
{id: 'AU.CT', size: 15, title: 'Australian Capital Territory'},
20
{id: 'AU.VI', size: 23, title: 'Victoria'},
21
{id: 'AU.WA', size: 86, title: 'Western Australia'},
22
{id: 'AU.QL', size: 16, title: 'Queensland'},
23
{id: 'AU.NS', size: 32, title: 'New South Wales'},
24
{id: 'AU.NT', size: 64, title: 'Northern Territory'},
25
{id: 'AU.TS', size: 28, title: 'Tasmania'},
26
{id: 'AU.SA', size: 45, title: 'South Australian'}
27
]);
28
29
var map1 = anychart.map();
30
map1.bounds(0, 0, '50%', '100%');
31
map1.geoData(anychart.maps.australia);
32
33
var series = map1.bubble(dataset1);
34
series.hatchFill('backward-diagonal', '#9E9E9E', 1.5, 10);
35
36
map1.container(stage);
37
map1.draw();
38
39
var map2 = anychart.map();
40
map2.bounds('50%', 0, '50%', '100%');
41
map2.geoData(anychart.maps.australia);
42
43
var secondSeries = map2.bubble(dataset2);
44
45
// Get hatch fill.
46
var hatchFill = series.hatchFill();
47
48
secondSeries.hatchFill(hatchFill);
49
50
map2.container(stage);
51
map2.draw();
52
53
var title = anychart.standalones.title();
54
title.text('Get and use hatch fill');
55
title.container(stage);
56
title.draw();
57
});