amCharts-document.getElementsByClassName（…）[0]未定义
[英]amCharts - document.getElementsByClassName(…)[0] is undefined
问题描述
I'm using amCharts to display a map. 
我正在使用amCharts来显示地图。 I'm aiming to change the color of a specify country using Javascript. 我的目标是使用Javascript更改指定国家/地区的颜色。
I do use the following line to change the color inside my web browser : 我确实使用以下行来更改Web浏览器内的颜色：
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
But when I use it inside my html page, this does not work. 但是，当我在html页面中使用它时，这是行不通的。
Here is the full html page : 这是完整的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>
Hope this problem can be solved ! 希望这个问题能解决！
Thanks ! 谢谢 ！
1 个解决方案
解决方案1
0 2015-10-15 10:21:25
Your code to manipulate fill color of the area is correct. 您用于操作区域填充颜色的代码是正确的。 However, it executes immediately on page load. 但是，它在页面加载时立即执行。 At that point the map is still initializing, meaning there's no such element yet, hence it not working. 那时，地图仍在初始化，这意味着尚无此类元素，因此它无法正常工作。
There are a number of ways to go about it. 有很多解决方法。
If you just need to load the map with certain areas (countries) colored, you could do that with map's config: 如果您只需要加载带有特定区域（国家/地区）颜色的地图，则可以使用地图的配置来完成此操作：
"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"
} ]
}
If that is not acceptable, or if you need to manipulate the map after it's built, I suggest you use map's API functions ( getObjectById() to get area object, then validate() to refresh it) to manipulate area colors, rather than CSS. 如果那是不可接受的，或者在构建地图后需要操作地图，我建议您使用地图的API函数（ getObjectById()获取区域对象，然后validate()刷新它）来控制区域颜色，而不是CSS 。
You would also need to ensure that map is initialized before doing so. 您还需要在此之前确保映射已初始化。 We can use init event for that. 我们可以使用init事件。
Consider the following code: 考虑以下代码：
AmCharts.makeChart("map", {
"type": "map",
// ...
"listeners": [{
"event": "init",
"method": function(event) {
var area = event.chart.getObjectById("FR");
area.color = "#000000";
area.validate();
}
}]
});
Here's a working example . 这是一个有效的例子 。
You could use the same event to manipulate color of the area using your CSS code, however I strongly suggest using API functions. 您可以使用CSS代码使用同一事件来操纵区域的颜色，但是我强烈建议您使用API函数。 While manipulating CSS directly may work, the changes might be reset when there's something going on on the map, such as when you hover the area. 虽然直接操作CSS可能会起作用，但是当地图上发生某些事情（例如，将鼠标悬停在该区域上）时，更改可能会重置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.