Skip to content

Instantly share code, notes, and snippets.

@diegomengarda

diegomengarda/index.html

Created October 14, 2018 02:03
Show Gist options
  • Save diegomengarda/206fb4e4e7da70a0ccdc560cae5e669d to your computer and use it in GitHub Desktop.
Save diegomengarda/206fb4e4e7da70a0ccdc560cae5e669d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title></title>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/br/br-all.js"></script>
<style>
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
window.onload = function() {
var data = [
['br-sp', 41],
['br-ma', 16],
['br-pa', 29],
['br-sc', 22],
['br-ba', 48],
['br-ap', 3],
['br-ms', 45],
['br-mg', 68],
['br-go', 27],
['br-rs', 43],
['br-to', 20],
['br-pi', 21],
['br-al', 7],
['br-pb', 9],
['br-ce', 16],
['br-se', 7],
['br-rr', 1],
['br-pe', 14],
['br-pr', 25],
['br-es', 13],
['br-rj', 25],
['br-rn', 8],
['br-am', 18],
['br-mt', 36],
['br-df', 4],
['br-ac', 7],
['br-ro', 4]
];
Highcharts.mapChart('container', {
chart: {
map: 'countries/br/br-all'
},
title: {
text: 'Mapa de Estados do Brasil'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#87CEFA',
maxColor: '#B22222'
},
series: [{
data: data,
name: 'Estações',
states: {
hover: {
color: '#FF8C00'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment