Question

我的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');
    });
});

Answer 1

添加此CSS对我有用。

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

Highcharts地图在悬停时不会改变颜色

1 个答案: