Highcharts地图不改变悬停颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.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);
}

以上是关于Highcharts地图不改变悬停颜色的主要内容,如果未能解决你的问题,请参考以下文章

动态更改条形颜色 - highcharts

SVG悬停矩形改变颜色

CSS按钮在悬停期间不改变颜色(css和html)

悬停改变颜色

关于HighCharts由表格生成的柱状图改变柱状图颜色

下拉菜单中的父 li 不改变悬停时的颜色