首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >MapPointSeries不打电话给amcharts5的heatRules吗?

MapPointSeries不打电话给amcharts5的heatRules吗?
EN

Stack Overflow用户
提问于 2022-04-25 09:24:20
回答 1查看 46关注 0票数 0

我已经成功地用MapPolygonSeries在amcharts5上创建了heatRules。但是我试图添加MapPointSeries来设置子弹的颜色。在我看来,heatRules根本没有被调用。是否有人有可用的示例,或者我的代码的问题很明显?

代码语言:javascript
复制
            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看起来是这样的:

代码语言:javascript
复制
[
{lat: -15.4183, lon: 28.287, value: 1.00448108131708},
{lat: -9.7915, lon: 29.0791, value: 1.0057251847281312},
...
]

备注:

  • 如果不设置“填充”,则不会绘制(或显示)
  • 在浏览器控制台(Chrome)

中没有错误。

谢谢您对此的任何见解!

EN

回答 1

Stack Overflow用户

发布于 2022-04-26 06:07:19

这是我如何解决的方法,但它是丑陋的,因为我基本上写了我自己的heatmap函数。我仍然开放的建议,如何使heatRules正确的工作点!

代码语言:javascript
复制
    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));
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71997251

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档