高图中的动态悬停颜色

Question

我使用highmap，并且我想在高图状态下悬停时制作动态不同的颜色。

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

 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> 

我对此进行了很多搜索，但未找到任何内容，因此请帮助我。 我在网上找到了一些解决方案，但它仅适用于高版本的旧地图，而不适用于最新版本。

您也可以在此处查看演示： 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上将此行为报告为u bug。