Карта Highcharts не меняет цвет при наведении

У меня есть следующие настройки на моей карте Highcharts, и когда я навожу курсор на страну, она не использует цвет, и я не знаю, почему. Все, что происходит, это то, что он меняет цвет на светло-голубой.

Highcharts.mapChart('geo-graph', {
    series: [{
        states: {
            hover: {
                color: '#f47d25'
            }
        }
    }]
});

Вот полный javascript (он использует лезвие, поэтому материал {!! $geo !!} заменяется на json):

let data = JSON.parse('{!! $geo !!}');
Highcharts.mapChart('geo-graph', {
    title: {
        text: null
    },
    mapNavigation: {
        enabled: true
    },
    colorAxis: {
        min: 1,
        type: 'logarithmic'
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'bottom'
    },
    series: [{
        data: data,
        mapData: Highcharts.maps['custom/world'],
        joinBy: ['iso-a2', 'code'],
        name: 'Country',
        allowPointSelect: true,
        states: {
            hover: {
                color: '#f47d25'
            }
        }
    }]
});

Вот некоторые примеры данных:

[{
    code:"US",
    name:"United States", 
    value:1100
}]

Когда я делаю это на jsfiddle, это работает, но когда я создаю его с помощью gulp elixir, это не работает. в этом проблема?

gulp.task('default', function () {
    elixir.config.sourcemaps = false;
    elixir.config.production = true;
    elixir(function (mix) {
        mix.styles([
            './node_modules/highcharts/css/highcharts.css'
        ], 'public/css/highcharts.css');
        mix.scripts([
            './node_modules/highcharts/js/highcharts.js',
            './node_modules/highcharts/js/modules/exporting.js',
            './node_modules/highcharts/js/modules/map.js',
            './node_modules/highcharts/js/modules/data.js'
        ], 'public/js/highcharts.js');
    });
});

person Get Off My Lawn    schedule 20.02.2017    source источник
comment
Можете ли вы сделать jsfiddle вашей проблемы (с некоторыми дополнительными данными), пожалуйста?   -  person Scott    schedule 20.02.2017
comment
Вот пример из демонстрации Highmaps. Похоже, у вас есть правильный синтаксис для определения состояния (строка 149 в демонстрационном коде).   -  person Scott    schedule 20.02.2017
comment
Когда я создаю на jsfiddle, он работает, но на моем сайте это не так. Я использую gulp для создания файла, может ли это быть проблемой?   -  person Get Off My Lawn    schedule 21.02.2017
comment
@GetOffMyLawn, какую версию jquery вы загружаете? (а также хайчарты). Недавно некоторые чарты были сломаны, когда им пришлось иметь дело с анимацией. Итак, стоит проверить номера версий.   -  person Vladimir M    schedule 21.02.2017
comment
Я использую npm для управления ими: "version": "5.0.6"   -  person Get Off My Lawn    schedule 21.02.2017
comment
В jsfiddle уже используют 5.0.7 и jquery 3.1.1. Попробуйте получить эти версии и посмотрите, будет ли ваш код работать лучше.   -  person Vladimir M    schedule 21.02.2017
comment
Я добавил ссылку на скрипт, когда я копирую теги script и помещаю их в свое приложение, он все еще не выделяется, но работает в jsfiddle...   -  person Get Off My Lawn    schedule 21.02.2017
comment
Хорошо, я понял это... Это была таблица стилей, которая, казалось, перезаписывала его.   -  person Get Off My Lawn    schedule 21.02.2017
comment
@getoffmylawn, какое именно свойство в CSS? Я столкнулся с той же проблемой, но не знаю, какое свойство перезаписывается   -  person Anupam    schedule 29.04.2017


Ответы (1)


Добавление этого CSS сработало для меня.

path:hover {
  fill: rgba(249, 209, 12, 0.87);
}
person Rishabh Jain    schedule 06.02.2019