Creé con éxito MapPolygonSeries en amcharts5 con heatRules. Pero estoy tratando de agregar MapPointSeries para establecer el color de las viñetas. Me parece que las reglas de calor no se llaman en absoluto. ¿Alguien tiene un ejemplo funcional o el problema con mi código es obvio?
var rootElements = am5.registry.rootElements; var root = (rootElements.length > 0? rootElements[0]: am5.Root.new("chartdiv")); root.container.children.clear(); var chart = root.container.children.push ( am5map.MapChart.new(root, { projection: am5map.geoMercator(), panX: "none", panY: "none", wheelX: "none", wheelY: "none" }) ); var pointSeries = chart.series.push( am5map.MapPointSeries.new(root, { latitudeField: "lat", longitudeField: "lon", fill: am5.color(0xff0000) }) ); var circleTemplate = am5.Template.new({}); pointSeries.bullets.push(function() { var bulletCircle = am5.Circle.new(root, { radius: 5, fill: pointSeries.get("fill"), fillOpacity: 0.8 }, circleTemplate); return am5.Bullet.new(root, { sprite: bulletCircle }); }); pointSeries.set("heatRules", [{ target: circleTemplate, dataField: "value", key: "fill" min: am5.color(0xff3300), max: am5.color(0xffff00), }]); pointSeries.data.setAll(myPointData);myPointData se ve así:
[ {lat: -15.4183, lon: 28.287, value: 1.00448108131708}, {lat: -9.7915, lon: 29.0791, value: 1.0057251847281312}, ... ]Notas:
¡Gracias de antemano por cualquier idea sobre esto!
Así es como hice una solución, pero es feo, ya que básicamente escribí mi propia función de mapa de calor. ¡Todavía estoy abierto a sugerencias sobre cómo hacer que las reglas de calor funcionen correctamente para obtener puntos!
function manualHeatMap(series) { if (series.length < 1) { return series; } var min, max; min = max = series[0].value; for (var i = 1; i < series.length; ++i) { if (series[i].value > max) { max = series[i].value; } if (series[i].value < min) { min = series[i].value; } } if (min == max) { min = 0; } for (var i = 0; i < series.length; ++i) { series[i].settings = {fill: am5.color(heatRuleCalc(min, max, series[i].value))}; } return series; } /* ... */ var circleTemplate = am5.Template.new({}); pointSeries.bullets.push(function() { var bulletCircle = am5.Circle.new(root, { radius: 7, templateField: "settings", fillOpacity: 0.8 }, circleTemplate); return am5.Bullet.new(root, { sprite: bulletCircle }); }); pointSeries.data.setAll(manualHeatMap(myPointData));