[英]why doesn't this code work on jsfiddle?
ok here is the jsfiddle: http://jsfiddle.net/Vh79z/2/ 好的,这里是jsfiddle: http : //jsfiddle.net/Vh79z/2/
and here is a working example: http://jvectormap.com/examples/france-elections/ 这是一个工作示例: http : //jvectormap.com/examples/france-elections/
Simple question.. It works on the example page, and I think I have replicate it perfectly - but it does not work. 一个简单的问题..它可以在示例页面上运行,我想我已经完美地复制了它-但它不起作用。
I am trying to implement this code into my own project and trying to work from this example - but it is useless since I can't get it work. 我正在尝试将此代码实现到我自己的项目中,并尝试从此示例开始工作,但是它没有用,因为我无法使它正常工作。
please help 请帮忙
$(function () {
$.getJSON('http://jvectormap.com/data/france-elections.json', function (data) {
new jvm.WorldMap({
map: 'fr_merc_en',
container: $('#map2007'),
series: {
regions: [{
scale: {
'1': '#4169E1',
'2': '#FF69B4'
},
attribute: 'fill',
values: data['year2007'].results
}]
}
});
new jvm.WorldMap({
map: 'fr_merc_en',
container: $('#map2012'),
series: {
regions: [{
scale: {
'1': '#FF69B4',
'2': '#4169E1'
},
attribute: 'fill',
values: data['year2012'].results
}]
}
});
});
}); });
The first issue is with your getJSON and CORS (Cross-origin resource sharing). 第一个问题与您的getJSON和CORS(跨域资源共享)有关。
Basically, the browser won't let you perform an XHR request to data from another domain - so it's throwing an error. 基本上,浏览器不允许您对来自另一个域的数据执行XHR请求-因此会引发错误。 If you open your developer console window, you'll see an error that looks something like
如果您打开开发者控制台窗口,则会看到类似以下内容的错误
XMLHttpRequest cannot load http://jvectormap.com/data/france-elections.json .
XMLHttpRequest无法加载http://jvectormap.com/data/france-elections.json 。 No 'Access-Control-Allow-Origin' header is present on the requested resource.
所请求的资源上没有“ Access-Control-Allow-Origin”标头。 Origin ' http://fiddle.jshell.net ' is therefore not allowed access.
因此,不允许访问源“ http://fiddle.jshell.net ”。
This is a security features of browsers to prevent certain kinds of attacks. 这是浏览器的安全功能,可以防止某些类型的攻击。 In order for this to work properly, the server over at jsvectormap needs to send out a special header in their response that indicates to the browser that it is safe to load data from their domain into the domain you're executing from.
为了使其正常工作,位于jsvectormap上的服务器需要在其响应中发送一个特殊的标头,该标头向浏览器指示可以安全地将数据从其域加载到要执行的域中。 There's really nothing you can do about it on your end, unless the person you're grabbing data from also supports JSONP (a way of circumventing the requirement of CORS headers).
最终,您实际上无能为力,除非您要从中获取数据的人员还支持JSONP(一种避免CORS标头要求的方法)。
Can you try grabbing the data you want first and just pasting it into JSFiddle directly as a JavaScript object? 您是否可以尝试先获取想要的数据,然后将其作为JavaScript对象直接粘贴到JSFiddle中?
EDIT: 编辑:
Doing that, it seems like it works great. 这样做似乎效果很好。 Here's the code (I would post a JSFiddle, but I can't have more than two links in a post with this little reputation):
这是代码(我会发布一个JSFiddle,但是在这个声誉不高的帖子中不能有两个以上的链接):
$(function(){
var data = {"year2012":{"candidate1":"Hollande","candidate2":"Sarkozy","results":{"FR-J":1,"FR-G":2,"FR-S":1,"FR-Q":1,"FR-F":2,"FR-P":1,"FR-D":1,"FR-O":1,"FR-M":2,"FR-A":2,"FR-I":2,"FR-R":1,"FR-E":1,"FR-T":1,"FR-B":1,"FR-N":1,"FR-L":1,"FR-V":2,"FR-C":1,"FR-K":1,"FR-U":2,"FR-H":2,"FR-GP":1,"FR-MQ":1,"FR-GF":1,"FR-YT":2}},"year2007":{"candidate1":"Sarkozy","candidate2":"Royal","results":{"FR-J":1,"FR-G":1,"FR-S":1,"FR-Q":1,"FR-F":1,"FR-P":1,"FR-D":1,"FR-O":1,"FR-M":1,"FR-A":1,"FR-I":1,"FR-R":1,"FR-E":2,"FR-T":2,"FR-B":2,"FR-N":2,"FR-L":2,"FR-V":1,"FR-C":2,"FR-K":1,"FR-U":1,"FR-H":1,"FR-GP":2,"FR-MQ":2,"FR-GF":1,"FR-YT":2}}};
new jvm.WorldMap({
map: 'fr_merc_en',
container: $('#map2007'),
series: {
regions: [{
scale: {
'1': '#4169E1',
'2': '#FF69B4'
},
attribute: 'fill',
values: data['year2007'].results
}]
}
});
new jvm.WorldMap({
map: 'fr_merc_en',
container: $('#map2012'),
series: {
regions: [{
scale: {
'1': '#FF69B4',
'2': '#4169E1'
},
attribute: 'fill',
values: data['year2012'].results
}]
}
});
});
exmple HERE: http://jsfiddle.net/Vh79z/3/ 例如: http : //jsfiddle.net/Vh79z/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.