Neste tutorial simples e rápido estarei mostrando como criar um gráfico de mapa de calor (heat map) com a biblioteca AmCharts.
Então vamos começar. Primeiro você precisará criar um arquivo HTML com as seguintes tags.
<html> <head> <!-- Setar para utf-8 para evitar problemas nos caracteres especiais --> <meta charset="utf-8"/> </head> <body> <!-- Buscando bibliotecas direto do site da AmCharts --> <script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/maps.js"></script> <script src="https://www.amcharts.com/lib/4/geodata/brazilLow.js"></script> <!-- Onde nosso gráfico será criado --> <div id="chartdiv"></div> </body> </html>
A explicação já esta inclusa nos comentários, mas resumidamente precisamos do utf-8 para não dar problema com estados que possuem acento no nome. As bibliotecas são chamadas do site para não precisar baixar nada.
Agora você pode criar uma tag script no final do HTML e colocar o código inline ou apontar para um arquivo JS externo. A escolha é sua.
Feito isso, precisaremos de uma fonte de dados. Para o nosso exemplo e de referência futura, você pode usar a lista abaixo. E ja peço desculpas pelo tamanho da lista, mas não quis minificar para ser fácil de entender.
let dados = [
{
"id" : "BR-AC",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-AL",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-AP",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-AM",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-BA",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-CE",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-DF",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-ES",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-GO",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-MA",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-MT",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-MS",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-MG",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-PA",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-PB",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-PR",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-PE",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-PI",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-RJ",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-RN",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-RS",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-RO",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-RR",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-SC",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-SP",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-SE",
"value" : Math.floor(Math.random()*10000)
},
{
"id" : "BR-TO",
"value" : Math.floor(Math.random()*10000)
}
];
Como você pode ver, a lista precisa de um ID com a abreviação BR-UF. Porque não apenas o UF? Porque deus quis assim…. kkkk… Eles provavelmente fazem uma separação de paises pois esta biblioteca permite criar mapas de qualquer pais do mundo. A segunda parte pode ser um número qualquer fixo, mas para nosso exemplo eu quis fazer com que fossem valores aleatórios até 10000.
Feito isso, adicione o código abaixo. É importante ler os cometários para entender o que e por que está acontecendo.
// Define o local e tipo de gráfico
let chart = am4core.create("chartdiv", am4maps.MapChart);
// Atribui o 'brazilLow' como o mapa
// Você pode optar pelo 'brazilHigh', basta alterar aqui e src do script no html
// Também define que as partes que montam o mapa serão com base no MapPolygonSeries
chart.geodata = am4geodata_brazilLow;
let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.data = dados;
polygonSeries.useGeodata = true;
// Preenche os dados para fazer o mapa de calor
// Faremos com que os menores valores sejam verdes e maiores sejam vermelhos
polygonSeries.heatRules.push({
property: "fill",
target: polygonSeries.mapPolygons.template,
min: am4core.color("green"),
max: am4core.color("red")
});
// Define as legendas, posição e cores.
let heatLegend = chart.createChild(am4maps.HeatLegend);
heatLegend.series = polygonSeries;
heatLegend.align = "right";
heatLegend.width = am4core.percent(25);
heatLegend.marginRight = am4core.percent(4);
heatLegend.minValue = 0;
heatLegend.maxValue = 10000;
heatLegend.valign = "bottom";
// Configuras os tooltips (texto ao passar o mouse)
let polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}: {value}";
polygonTemplate.nonScalingStroke = true;
polygonTemplate.strokeWidth = 0.5;
// Muda a cor do estado ao passar o mouse
let hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("green").brighten(-0.5);
Isso ai, com isso você terá um mapa mais ou menos (pois muda a cada atualização) assim:
