2015-09-09 104 views
1

我想重複Highmaps演示>地圖氣泡,除了我想添加其他圖表到同一頁面。當我加載Highcharts腳本和Highmaps模塊腳本時,圖表不顯示。瀏覽器拋出一個通用錯誤。看到j​​sfiddle的例子。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

在控制檯(開發人員工具)中,您收到錯誤消息。只需點擊此鏈接,查看高層圖片的錯誤。 –