我已经成功地用MapPolygonSeries在amcharts5上创建了heatRules。但是我试图添加MapPointSeries来设置子弹的颜色。在我看来,heatRules根本没有被调用。是否有人有可用的示例,或者我的代码的问题很明显?
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看起来是这样的:
[
{lat: -15.4183, lon: 28.287, value: 1.00448108131708},
{lat: -9.7915, lon: 29.0791, value: 1.0057251847281312},
...
]备注:
中没有错误。
谢谢您对此的任何见解!
发布于 2022-04-26 06:07:19
这是我如何解决的方法,但它是丑陋的,因为我基本上写了我自己的heatmap函数。我仍然开放的建议,如何使heatRules正确的工作点!
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));https://stackoverflow.com/questions/71997251
复制相似问题