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

我正在使用amCharts来显示地图。我打算用Javascript改变指定国家的颜色。amCharts - document.getElementsByClassName（...）[0]未定义

我使用下面的行来改变我的网页浏览器里面的颜色：

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>

希望这个问题是可以解决的！

谢谢！

来源

2015-10-14 DIEBOLD

我没有看到有'class =“amcharts-map-area-FR”'的任何元素。 – Oriol

AmCharts库完成所有工作，并创建元素。 – DIEBOLD

图书馆可能异步地装箱。所以当你使用'getElementsByClassName'时，元素还没有。搜索库是否允许您设置完成后运行的回调。 – Oriol

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

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

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

"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(); 
    } 
    }] 
});

这里有一个working example。

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

来源

2015-10-15 10:21:25 martynasma

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

回答

相关问题