1

我正在使用 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>

希望这个问题可以解决！

谢谢 ！

4

1 回答 1

0

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

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

如果您只需要加载某些区域（国家）颜色的地图，您可以使用地图的配置来做到这一点：

"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()获取区域对象，然后validate()刷新它）来操作区域颜色，而不是 CSS。

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

考虑以下代码：

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

这是一个工作示例。

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

于 2015-10-15T10:21:25.487 回答