Почему этот код не работает на jsfiddle?

Question

нормально вот jsfiddle: http://jsfiddle.net/Vh79z/2/

и вот рабочий пример: http://jvectormap.com/examples/france-elections/

Простой вопрос .. Он работает на примере страницы, и я думаю, что я повторить это прекрасно - но это делает не работа.

Я пытаюсь реализовать этот код в своем собственном проекте и пытаюсь работать из этого примера - но это бесполезно, так как я не могу заставить его работать.

пожалуйста, помогите

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

});

Answer 1

Первая проблема связана с вашим использованием getJSON и CORS (совместное использование ресурсов для разных источников).

В принципе, браузер не позволит вам выполнить запрос XHR к данным из другого домена - так что это ошибка. Если открыть окно консоли разработчика, вы увидите сообщение об ошибке, которое выглядит как

XMLHttpRequest не может загрузить http://jvectormap.com/data/france-elections.json. Нет Заголовок «Access-Control-Allow-Origin» присутствует на запрошенном ресурсе . Origin 'http://fiddle.jshell.net' поэтому не разрешен доступ.

Это функции безопасности браузеров для предотвращения определенных видов атак. Чтобы это нормально работало, сервер в jsvectormap должен отправить специальный ответ в своем ответе, который указывает браузеру, что безопасно загружать данные из своего домена в домен, из которого вы выполняете. На самом деле вы ничего не можете с этим поделать, если только человек, которого вы захватываете данные, также поддерживает JSONP (способ обойти требование заголовков CORS).

Можете ли вы попробовать захватить нужные данные и просто вставить его в JSFiddle непосредственно в качестве объекта JavaScript?

EDIT:

Делая это, похоже, он прекрасно работает. Вот код (я бы оставить 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 ЗДЕСЬ: http://jsfiddle.net/Vh79z/3/