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

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

javascript

Javascript amCharts-document.getElementsByClassName（…）[0]未定义,javascript,amcharts,ammap,Javascript,Amcharts,Ammap,我正在使用amCharts显示地图。我的目标是使用Javascript更改指定国家的颜色我确实使用以下行更改web浏览器中的颜色： document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color); 但是，当我在html页面中使用它时，它就不起作用了以下是完整的html页面： <!DOCTYPE html> <html> <head>

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

我确实使用以下行更改web浏览器中的颜色：

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>


使用amCharts创建的地图| amCharts
AmCharts.makeChart（“地图”{
“类型”：“地图”，
“路径图像”：http://www.amcharts.com/lib/3/images/",
“addClassNames”：true，
“字体大小”：15，
“颜色”：“FFFFFF”，
“背景阿尔法”：1，
“背景色”：“rgba（80,80,80,1）”，
“数据提供者”：{
“地图”：“世界地图”，
“getAreasFromMap”：真，
“图像”：[
{
“顶级”：40，
“左”：60，
“宽度”：80，
“高度”：40，
“PixelmaperLogo”：正确，
“imageURL”：http://pixelmap.amcharts.com/static/img/logo.svg",
“url”：”http://www.amcharts.com"
}
]
},
“气球”：{
“水平填充”：15，
“borderAlpha”：0，
“边界厚度”：1，
“垂直填充”：15
},
“区域设置”：{
“颜色”：“rgba（1291,1）”，
“大纲颜色”：“rgba（80,80,80,1）”，
“滚动大纲颜色”：“rgba（80,80,80,1）”，
“正确性”：20，
“选定亮度”：20，
“可选”：正确，
“unlistedAreasAlpha”：0，
“unlistedAreasOutlineAlpha”：0
},
“图像设置”：{
“阿尔法”：1，
“颜色”：“rgba（1291,1）”，
“outlineAlpha”：0，
“rollOverOutlineAlpha”：0，
“大纲颜色”：“rgba（80,80,80,1）”，
“正确性”：20，
“选定亮度”：20，
“可选”：真
},
“线路设置”：{
“颜色”：“rgba（1291,1）”，
“可选”：正确，
“正确性”：20，
“选定亮度”：20
},
“动物控制”：{
“zoomControlEnabled”：正确，
“homeButtonEnabled”：false，
“panControlEnabled”：错误，
“对”：38，
“底部”：30，
“minZoomLevel”：0.25，
“网格高度”：100，
“gridAlpha”：0.1，
“gridBackgroundAlpha”：0，
“gridColor”：“#FFFFFF”，
“Dragger Alpha”：1，
“纽扣角”：2
}
});
$（文档）.ready（函数（）{
控制台日志（“加载的文档”）；
color=“#000000”；
document.getElementsByClassName（“amcharts映射区域FR”）[0].setAttribute（“fill”，color）；
}
);
$（窗口）。加载（函数（）{
控制台日志（“窗口加载”）；
});

希望这个问题能解决

谢谢

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

有很多方法可以做到这一点

如果您只需要加载带有特定区域（国家）颜色的地图，您可以使用地图的配置：

"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函数（获取面积对象，然后刷新它）来操作面积颜色，而不是CSS

在执行此操作之前，您还需要确保映射已初始化。我们可以使用事件来实现这一点

考虑以下代码：

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可能会起作用，但当地图上出现某些情况时，例如当您悬停该区域时，更改可能会被重置。

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