Highmaps mit Highcharts: Highcharts Fehler # 17 mit jQuery

Question

Ich arbeite an Highcharts mit Highmaps. Ich muss den Aufriss auf Länderebene anzeigen. Also verwende ich http://www.highcharts.com/maps/demo/latlon-advanced. Mein Code ist wie folgt:

var baseMapPath = "https://code.highcharts.com/mapdata/"; 
    localStorage.setItem('locationHash', 'countries/us/us-all'), 
    mapGeoJSON = null; 
    function change() { 
     console.log("localStorage : ", localStorage.getItem('locationHash')); 
     var locationVariable = localStorage.getItem('locationHash') + '.js'; 
     var mapKey = locationVariable.slice(0, -3), 
     javascriptPath = baseMapPath + locationVariable, 
     up = angular.element(document.getElementById('up')), 
     container = angular.element(document.getElementById('container')), 
     containerHighcharts = container.highcharts(); 


     if (containerHighcharts) { 
      containerHighcharts.showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>'); 
     } 
     function mapReady(jsonData) { 
      console.log("mapKey inside mapReady function : ", mapKey); 
      console.log("Highcharts : ", Highcharts); 
      console.log("typeof : ", typeof(Highcharts)); 
      mapGeoJSON = Highcharts.maps[mapKey]; 
      var data = jsonData, 
       match; 

      // console.log("mapGeoJSON inside mapReady: ", mapGeoJSON); 
      console.log("data : ", data); 
      if (/^countries\/[a-z]{2}\/[a-z]{2}-all$/.test(mapKey)) { // country 
       var parent = { 
        desc: 'World', 
        key: 'custom/world' 
       }; 
      } 
      up.html(''); 
      if (parent) { 
       up.append(
        $('<a><i class="fa fa-angle-up"></i> ' + parent.desc + '</a>') 
         .attr({ 
          title: parent.key 
         }) 
         .click(function() { 
          localStorage.setItem('locationHash', parent.key); 
          change(); 
         }) 
       ); 
      } 
      container.highcharts('Map', { 
       title: { 
        text: 'Aosis : Highmaps Lat/Long' 
       }, 
       chartType: 'map', 
       tooltip: { 
        pointFormat: '{point.countryName} : {point.count}' 
       }, 
       mapNavigation: { 
        enabled: true, 
        buttonOptions: { 
         verticalAlign: 'bottom' 
        } 
       }, 
       series: [{ 
        name: 'Basemap', 
        mapData: mapGeoJSON, 
        borderColor: '#606060', 
        nullColor: 'rgba(200, 200, 200, 0.2)', 
        showInLegend: false 
       }, { 
        name: 'Separators', 
        type: 'mapline', 
        data: Highcharts.geojson(mapGeoJSON, 'mapline'), 
        color: '#101010', 
        enableMouseTracking: false, 
        showInLegend: false 
       }, { 
        type: 'mapbubble', 
        dataLabels: { 
         enabled: true, 
         format: '{point.countryName}' 
        }, 
        name: 'Cities', 
        data: data, 
        maxSize: '3%', 
        color: Highcharts.getOptions().colors[0] 
       }], 
       plotOptions:{ 
        series:{ 
         point: { 
          events: { 
           // On click, look for a detailed map 
           click: function() { 
            console.log("click event"); 
            var key = this.key; 
            localStorage.setItem('locationHash', 'countries/' + key.substr(0, 2) + '/' + key + '-all'); 
            if(!(/-/.test(key))) 
             change(); 
            else 
             console.log("Result inside else : ", /-/.test(key)); 
           } 
          } 
         } 
        } 
       } 
      }); 
     } 

     function getLatLongData(){ 
      console.log("Inside getLatLongData function"); 
      $.ajax({ 
        url: 'https://www.highcharts.com/samples/data/jsonp.php?filename=us-capitals.json&callback=?', 
        type: 'GET', 
        dataType: 'json', 
        success: function(jsonData){console.log("Completed jsonData call. Now calling mapReady function"); mapReady(jsonData)} 
       }); 
     } 
     if (Highcharts.maps[mapKey]) { 
      getLatLongData(); 
     } else { 
      $.getScript(javascriptPath, getLatLongData); 
     } 
    } 

    //Trigger the change function on page load 
    change(); 

Meine highcharts Quelldateien sind wie folgt:

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

ich Störung erhalte:

Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17.

Answer 1

A mapbubble Serie ist eine erweiterte Blase Serie, so Wenn Sie Map als Plugin laden und einen Mapbubble verwenden, dann müssen Sie auch highcharts-more-Module hinzufügen.

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/maps/modules/map.js"></script> 

17 Fehler bekommen ->http://jsfiddle.net/cs0kmz1m/

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
<script src="https://code.highcharts.com/maps/modules/map.js"></script> 

kein Fehler, wenn highcharts-mehr enthalten ->http://jsfiddle.net/cs0kmz1m/1/