Question

我使用amCharts显示地图。我的目标是使用Javascript更改指定国家/地区的颜色。

我使用以下行来更改网络浏览器中的颜色：

document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);

但是当我在我的html页面中使用它时，这不起作用。

这是完整的html页面：

<!DOCTYPE html>
<html>
    <head>
        <title>map created with amCharts | amCharts</title>
        <meta name="description" content="map created using amCharts pixel map generator" />

        <!--
            This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
            You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to http://pixelmap.amcharts.com/
            To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/

            If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
            To do so, visit amCharts Online Store: http://www.amcharts.com/online-store/
        -->

        <!-- amCharts javascript sources -->
        <script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
        <script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>

        <!-- amCharts javascript code -->
        <script type="text/javascript">
            AmCharts.makeChart("map",{
                    "type": "map",
                    "pathToImages": "http://www.amcharts.com/lib/3/images/",
                    "addClassNames": true,
                    "fontSize": 15,
                    "color": "#FFFFFF",
                    "backgroundAlpha": 1,
                    "backgroundColor": "rgba(80,80,80,1)",
                    "dataProvider": {
                        "map": "worldLow",
                        "getAreasFromMap": true,
                        "images": [
                            {
                                "top": 40,
                                "left": 60,
                                "width": 80,
                                "height": 40,
                                "pixelMapperLogo": true,
                                "imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
                                "url": "http://www.amcharts.com"
                            }
                        ]
                    },
                    "balloon": {
                        "horizontalPadding": 15,
                        "borderAlpha": 0,
                        "borderThickness": 1,
                        "verticalPadding": 15
                    },
                    "areasSettings": {
                        "color": "rgba(129,129,129,1)",
                        "outlineColor": "rgba(80,80,80,1)",
                        "rollOverOutlineColor": "rgba(80,80,80,1)",
                        "rollOverBrightness": 20,
                        "selectedBrightness": 20,
                        "selectable": true,
                        "unlistedAreasAlpha": 0,
                        "unlistedAreasOutlineAlpha": 0
                    },
                    "imagesSettings": {
                        "alpha": 1,
                        "color": "rgba(129,129,129,1)",
                        "outlineAlpha": 0,
                        "rollOverOutlineAlpha": 0,
                        "outlineColor": "rgba(80,80,80,1)",
                        "rollOverBrightness": 20,
                        "selectedBrightness": 20,
                        "selectable": true
                    },
                    "linesSettings": {
                        "color": "rgba(129,129,129,1)",
                        "selectable": true,
                        "rollOverBrightness": 20,
                        "selectedBrightness": 20
                    },
                    "zoomControl": {
                        "zoomControlEnabled": true,
                        "homeButtonEnabled": false,
                        "panControlEnabled": false,
                        "right": 38,
                        "bottom": 30,
                        "minZoomLevel": 0.25,
                        "gridHeight": 100,
                        "gridAlpha": 0.1,
                        "gridBackgroundAlpha": 0,
                        "gridColor": "#FFFFFF",
                        "draggerAlpha": 1,
                        "buttonCornerRadius": 2
                    }
                });
        </script>


        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );

                    color = "#000000";

                    document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
                }
    );

    $( window ).load(function() {
        console.log( "window loaded" );
    });
    </script>

    </head>
    <body style="margin: 0;background-color: rgba(80,80,80,1);">
        <div id="map" style="width: 100%; height: 767px;"></div>
    </body>
</html>

希望这个问题能够解决！

谢谢！

Answer 1

操作区域填充颜色的代码是正确的。但是，它会在页面加载时立即执行。此时地图仍在初始化，这意味着还没有这样的元素，因此它无法正常工作。

有很多方法可以解决这个问题。

如果您只是需要加载某些区域（国家/地区）颜色的地图，您可以使用地图配置执行此操作：

"dataProvider": {
  "map": "worldLow",
  "getAreasFromMap": true,
  "areas": [ {
    "id": "FR",
    "color": "#00FF00"
  } ],
  "images": [ {
    "top": 40,
    "left": 60,
    "width": 80,
    "height": 40,
    "pixelMapperLogo": true,
    "imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
    "url": "http://www.amcharts.com"
  } ]
}

如果这是不可接受的，或者您需要在构建后操作地图，我建议您使用地图的API函数（getObjectById()来获取区域对象，然后{{ 3}}刷新它来操纵区域颜色，而不是CSS。

您还需要确保在执行此操作之前初始化地图。我们可以使用validate()事件。

请考虑以下代码：

AmCharts.makeChart("map", {
  "type": "map",
  // ...
  "listeners": [{
    "event": "init",
    "method": function(event) {
      var area = event.chart.getObjectById("FR");
      area.color = "#000000";
      area.validate();
    }
  }]
});

这里是init。

您可以使用相同的事件来使用CSS代码处理区域的颜色，但我强烈建议您使用API函数。虽然可以直接操作CSS，但是当地图上发生某些事情时（例如当您悬停该区域时），可能会重置更改。

amCharts - document.getElementsByClassName（...）[0]未定义

1 个答案: