2016-04-01 21 views
2

Highcharts harita örneğini çoğaltmaya çalışıyorum ama çalışmıyor.Highcharts harita örneği çalışmaya çalışmıyor

benim grafik Google Chrome konsolda döner işlemek için deneyin:

highcharts.js:8 Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17 
    X @ highcharts.js:8 
    hb.initSeries @ highcharts.js:211 
    (anonymous function) @ highcharts.js:233 
    o @ highcharts.js:25 
    hb.firstRender @ highcharts.js:233 
    hb.init @ highcharts.js:211 
    (anonymous function) @ data.js:24 
    a.(anonymous function) @ highcharts.js:21 
    hb.getArgs @ highcharts.js:210 
    B.Chart @ highcharts.js:210 
    i.Map.i.mapChart @ map.js:57 
    E.jQuery.fn.highcharts @ highcharts.js:29 
    (anonymous function) @ grafico_map.php:36 
    j @ jquery.min.js:2 
    k.fireWith @ jquery.min.js:2 
    x @ jquery.min.js:4 
    n.prop.on.c @ jquery.min.js:4 
    n.event.dispatch @ jquery.min.js:3 
    r.handle @ jquery.min.js:3 

Benim Kod geçerli:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

     <title>Maps Chart</title>  

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <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> 
     <script src="http://code.highcharts.com/highcharts-more.js"></script> 

    </head> 
    <body> 

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


     <script language="JavaScript"> 

     $(document).ready(function() { 

      $.getJSON('https://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' 
         } 
        }] 
       }); 

      }); 
     }); 

</script> 
    </body> 
</html> 

herhangi biri beni yanlış olanı bulmak için yardımcı olabilir?

cevap

3

map.js modülünden highcharts-more.js ürününü yüklemeniz gerekir. Bunun nedeni, bubble grafik türünün highcharts-more.js'da tanımlanmış olması ve map.js modülünde tanımlanan mapbubble grafik türünün temelidir.

Yani sadece bu gibi örneğin, <script> etiketleri yeniden düzenlemek:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.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> 

eylem bunun this JSFiddle demonstration bakınız.

+1

Teşekkür ederiz! Çok iyi çalışıyor, benim hatam için gerçekten üzgünüm. Siparişin bu hataya neden olabileceğini umursamıyorum! – Catao

+0

@Catao bu cevabı kabul etmeyi ne dersin? – Anupam