2015-09-09 2 views
1

Я пытаюсь дублировать демонстрации Highmaps Demos> Map bubble, за исключением того, что я хочу добавить другие диаграммы на ту же страницу. Когда я загружаю скрипт Highcharts и скрипт модуля Highmaps, диаграмма не отображает. Браузер выдает общую ошибку. См. Пример jsfiddle.Highcharts + модуль Highmaps не работает

https://jsfiddle.net/hkjbn6wg/1/

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/maps/modules/map.js"></script> 
<script src="http://code.highcharts.com/maps/modules/data.js"></script> 
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script> 

<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div> 

$(function() { 

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) { 

     var mapData = Highcharts.geojson(Highcharts.maps['custom/world']); 

     // Correct UK to GB in data 
     $.each(data, function() { 
      if (this.code === 'UK') { 
       this.code = 'GB'; 
      } 
     }); 

     $('#container').highcharts('Map', { 
      chart : { 
       borderWidth : 1 
      }, 

      title: { 
       text: 'World population 2013 by country' 
      }, 

      subtitle : { 
       text : 'Demo of Highcharts map with bubbles' 
      }, 

      legend: { 
       enabled: false 
      }, 

      mapNavigation: { 
       enabled: true, 
       buttonOptions: { 
        verticalAlign: 'bottom' 
       } 
      }, 

      series : [{ 
       name: 'Countries', 
       mapData: mapData, 
       color: '#E0E0E0', 
       enableMouseTracking: false 
      }, { 
       type: 'mapbubble', 
       mapData: mapData, 
       name: 'Population 2013', 
       joinBy: ['iso-a2', 'code'], 
       data: data, 
       minSize: 4, 
       maxSize: '12%', 
       tooltip: { 
        pointFormat: '{point.code}: {point.z} thousands' 
       } 
      }] 
     }); 

    }); 
}); 

ответ

0

ошибка печатается, потому что вы пропустите Highcharts-more.js файл.

Добавить ссылку на этот файл и пример будет работать.

<script src="http://code.highcharts.com/highcharts-more.js"></script> 

http://jsfiddle.net/hkjbn6wg/2/

+0

Это работало отлично. Можете ли вы указать мне документацию для этого файла? Я не знаю, как я это пропустил. Благодаря! –

+0

В консоли (инструменты разработчика) появляется сообщение об ошибке. Единственное, что вам нужно, это щелкнуть по этой ссылке, чтобы проверить, что не так с high-картами. –

Смежные вопросы