Highcharts地图不改变悬停颜色

Posted 2021-04-01

我有以下设置在我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.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');
    });
});

答案

添加此CSS为我工作。

path:hover {
  fill: rgba(249, 209, 12, 0.87);
}