javascript - 高 map 中的动态悬停颜色

Question

我使用 Highcharts ，我想在 Highcharts 状态下悬停时制作动态不同的颜色。

正如你可以看到不同的颜色，这就是我做的

var usMapChart ,  data = [] ;
var  mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
var UsMapdata = ([
	{"value": 3,"code": "ma",'hovercolor':'#d8077a'},
	{"value": 3,"code": "ct",'hovercolor':'#d8077a'},
	{"value": 3,"code": "md",'hovercolor':'#d8077a'},
	{"value": 3,"code": "ny",'hovercolor':'#d8077a'},
	{"value": 3,"code": "in",'hovercolor':'#d8077a'},
	{"value": 3,"code": "nc",'hovercolor':'#d8077a'},
	{"value": 3,"code": "nh",'hovercolor':'#d8077a'},
	{"value": 3,"code": "wi",'hovercolor':'#d8077a'},
	{"value": 3,"code": "wa",'hovercolor':'#d8077a'},
	{"value": 3,"code": "vt",'hovercolor':'#d8077a'},
	{"value": 3,"code": "mn",'hovercolor':'#d8077a'},
	{"value": 3,"code": "me",'hovercolor':'#d8077a'},
	{"value": 3,"code": "or",'hovercolor':'#d8077a'},
	{"value": 3,"code": "nd",'hovercolor':'#d8077a'},
	{"value": 3,"code": "ia",'hovercolor':'#d8077a'},
	{"value": 3,"code": "mi",'hovercolor':'#d8077a'},
	{"value": 3,"code": "mt",'hovercolor':'#d8077a'},
	{"value": 3,"code": "dc",'hovercolor':'#d8077a'},
  {"value": 2,"code": "nj",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "mo",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "de",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "fl",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "oh",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "pa",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "il",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ca",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "hi",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "va",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ga",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "tn",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "sc",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "la",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ky",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ms",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "al",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "az",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "co",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ks",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ut",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ne",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "wv",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "id",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "nm",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "sd",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "wy",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ak",'hovercolor':'#ff66c1'},
	{"value": 2,"code": "ri",'hovercolor':'#ff66c1'},
	
	{"value": 1,"code": "ar",'hovercolor':'#f6adcd'},
	{"value": 1,"code": "tx",'hovercolor':'#f6adcd'},
	{"value": 1,"code": "ok",'hovercolor':'#f6adcd'},
	{"value": 1,"code": "nv",'hovercolor':'#f6adcd'},
	
	
	
]);
var hoverColor ="";	
var hoverIndex ;
var Pointhover ;
    // Get the map data
    // Get the map data
   
		
$.each(mapData, function () {
    var path = this.path,
        copy = {
            path: path
        };
    // This point has a square legend to the right
    if (path[1] === 9727) {
        // Identify the box
        Highcharts.seriesTypes.map.prototype.getBox.call({}, [copy]);
        // Place the center of the data label in the center of the point legend box
        this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX); // eslint-disable-line no-underscore-dangle
        this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY); // eslint-disable-line no-underscore-dangle
    }
    // Tag it for joining
    this.ucName = this.name.toUpperCase();
});	

// Make codes uppercase to match the map data
$.each(UsMapdata, function () {
	this.code = this.code.toUpperCase();
});

var oldColor ;
var flagColor = false
	// Process mapdata
$(document).ready(function(e) {
   // Instanciate the map
   usMapChart =  Highcharts.mapChart('container_map', {
        chart: {
            borderWidth: 0,
			backgroundColor:'#60d2fe'
        },
        title: {
            text: 'US population density (/km²)'
        },

        legend: {
			enabled: false,
            layout: 'horizontal',
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.85)',
            floating: true,
            verticalAlign: 'bottom',
            y: 50
        },

        mapNavigation: {
            enabled: true
        },
        colorAxis: {
            min: 1,
            type: 'linear ',
            minColor: '#08b3f5',
            maxColor: '#1282cb',
            stops: [
                [0, '#08b3f5'],
                [0.50, '#069cd5'],
                [1, '#1282cb']
            ],
			events: {
				afterSetExtremes: function(){
					console.log(this)
				},
				setExtremes: function(){
					console.log(this)
				}
			}
        },
		plotOptions: {
          	series: {
             	states: {
                 	hover: {
						brightness: 0.0,
						enabled: true,
                     	color:this.hovercolor   
                    }
                }
            }
        },
        series: [{
            animation: {
                duration: 300
            },
			borderColor: "#60d2fe",
			borderWidth: 1,
            data: UsMapdata,
            mapData: mapData,
            joinBy: ['postal-code', 'code'],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                format: '{point.code}'
            },
			states: {
				hover: {
					brightness: 0.0,
					color: hoverColor,
					enabled: false,
				}
			},
            name: 'Population density',
            tooltip: {
				enabled: false,
                pointFormat: '{point.code}: {point.value}/km²'
            },
			point: {
				events: {
					mouseOut: function(){
						if(this.value === 3){
							hoverColor = '#1282cb';
						}else if(this.value === 2){
							hoverColor = '#069cd5';
						}else{
							hoverColor = '#08b3f5';
						}
						
						
					},
				}
			}
        }, {
        type: 'mapline',
        data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
        color: '#ffffff'
    }]
	}); 
});
    

#container {
    max-width: 600px; 
    height: 400px; 
    margin: 0 auto;
}
#container_map_tableDiv {
    max-width: 600px;
    margin: 3em auto;
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>
<div id="container_map"></div>

我对此进行了很多搜索，但没有找到，所以请帮助我。我在网上找到了一些解决方案，但它仅适用于旧版本的 highmap，不适用于最新版本。

您还可以在这里查看演示:http://dev.artoonsolutions.com/jignesh_kheni/map_demo/

Answer 1

我不确定这是否是 Highcharts 5 中的一个错误，但似乎为一个点设置状态不起作用。

您可以包装负责在更改状态时设置图形属性的方法。

var H = Highcharts;

H.wrap(H.seriesTypes.map.prototype, 'pointAttribs', function(p, point, state) {
  console.log(point);
  var attr = p.call(this, point, state),
      states = point.states,
      hover = states && states.hover;

  if (state === 'hover' && hover && hover.color) {
    attr.fill = hover.color ;
  }

  return attr;
})

以及一个点的配置:

var UsMapdata = ([{
  "value": 3,
  "code": "ma",
  states: {
    hover: {
      color: 'red'
    }
  }
}]);

示例:https://jsfiddle.net/gshrz168/

我将该行为报告为 Highcharts 上的错误 github .