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]未定義

回答

相關問題