Блог

Главная - Вопросы по программированию - Карты высокого уровня с Highcharts: ошибка # 17 Highcharts с jQuery

Карты высокого уровня с Highcharts: ошибка # 17 Highcharts с jQuery

#jquery #highcharts #highmaps

#jquery #highcharts #highmaps

Вопрос:

Я работаю над использованием highcharts с highmaps. Я должен показать детализацию на уровне состояния. Итак, я использую http://www.highcharts.com/maps/demo/latlon-advanced. Мой код выглядит следующим образом : 

     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.jsonamp;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();

Мои исходные файлы highcharts следующие : 

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

Я получаю сообщение об ошибке:

Ошибка, не перехваченная: ошибка Highcharts # 17: www.highcharts.com/errors/17 .

Комментарии:

1. В примере, на который вы ссылались, используется <script src=» code.highcharts.com/maps/highmaps.js «></script > вместо этого, если highcharts.js

2. Я знаю это, но, как я уже упоминал, я использую highmaps с highcharts, мне нужно использовать maps.js вместо highmaps.js . Это согласно ссылке на официальные документы

Ответ №1:

Серия mapbubble — это расширенная серия bubble, поэтому, если вы загружаете карту как плагин и используете mapbubble, вам также необходимо включить модуль highcharts-more.

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

Получаем ошибку 17 -> 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>

Ошибки нет, если включены highcharts-more ->http://jsfiddle.net/cs0kmz1m/1

Ответ №2:

Попробуйте удалить компоненты bower, а затем установить их снова. Сработало для меня

 > bower install -g