2014-10-25 2 views
0

하이 차트를 사용하려고합니다. 하이 차트는 완벽하게 작동하지만 하이 맵은 하이 맵을 사용하지 않습니다.Highmaps occuring 'Uncaught TypeError : undefined is not function'이며로드되지 않습니까?

Highchart 그래픽으로로드되지 않는 하이 맵. 'Uncaught TypeError : undefined is not function is not function'콘솔에서 오류가 발생했습니다. 자바 스크립트 오류가 있다고 가정합니다.하지만 어떻게 해결할 수 있습니까?

코드 : 대한 도움이

<script src="http://code.highcharts.com/maps/highmaps.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> 
<script> 
$(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 2010 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 2010', 
       joinBy: ['iso-a2', 'code'], 
       data: data, 
       minSize: 4, 
       maxSize: '12%', 
       tooltip: { 
        pointFormat: '{point.code}: {point.z} thousands' 
       } 
      }] 
     }); 

    }); 
}); 
</script> 

감사합니다.

+0

당신이 jQuery를로드 마십시오 플러그인 다른 highmaps 전에 jquery.min.js를 추가 할 필요가? – dfsq

+1

이 글을 작성하는 것에 대해 유감스럽게 생각합니다. 예 jquery가로드되었습니다. – tcett

+0

저에게 잘 부탁드립니다 : http://jsfiddle.net/e0vb1vzs/ –

답변

1

당신은

$(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 2010 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 2010', 
 
       joinBy: ['iso-a2', 'code'], 
 
       data: data, 
 
       minSize: 4, 
 
       maxSize: '12%', 
 
       tooltip: { 
 
        pointFormat: '{point.code}: {point.z} thousands' 
 
       } 
 
      }] 
 
     }); 
 

 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/maps/highmaps.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>

관련 문제