HTMLcopy
1
<button onclick="drillUp()">Drill Up</button>
2
<div id="container"></div>
CSScopy
15
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
button {
8
margin: 10px 0 0 10px;
9
}
10
#container {
11
position: absolute;
12
width: 100%;
13
top: 35px;
14
bottom: 0;
15
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// This sample uses 3rd party proj4 component
4
// that makes it possible to set coordinates
5
// for the points and labels on the map and
6
// required for custom projections and grid labels formatting.
7
// See https://docs.anychart.com/Maps/Map_Projections
8
9
// data sets
10
worldDataSet = [
11
{id: "US"}
12
];
13
usaDataSet = [
14
{id: "US.TX"}
15
];
16
17
// world map
18
chart = anychart.map();
19
chart.geoData(anychart.maps.world);
20
worldSeries = chart.choropleth(worldDataSet);
21
22
// usa map
23
map = anychart.map();
24
map.geoData(anychart.maps.united_states_of_america);
25
usaSeries = map.choropleth(usaDataSet);
26
27
// texas map
28
txMap = anychart.map();
29
txMap.geoData(anychart.maps["texas"]);
30
31
// set drill down for maps
32
worldSeries.listen("pointClick", function(e) {
33
// Drill down to the specified map.
34
chart.drillTo(e.point.get("id"), map);
35
});
36
37
usaSeries.listen("pointClick", function(e) {
38
// Drill down to the specified map.
39
chart.drillTo(e.point.get("id"), txMap);
40
});
41
42
// listen for draw event and update path in a title
43
chart.listen("chartDraw",function() {
44
// get drilldown path
45
var path = chart.getDrilldownPath();
46
47
// get link to the current chart
48
var cv = path[path.length - 1].getCurrentChart();
49
50
// update path in the title of appropriate instance
51
cv.title(printPath(path))
52
});
53
54
// set chart bounds and display it
55
chart.container("container");
56
chart.draw();
57
58
});
59
60
// function to turn current drill down path structure to string
61
function printPath(path){
62
// root element is the World in this case
63
var text = "World";
64
// go through the next levels
65
for (i = 1; i < path.length; i++) {
66
text += " -> " + path[i].getProperties().name;
67
}
68
return text;
69
}
70
71
// drill up
72
function drillUp() {
73
chart.drillUp();
74
}