動態懸停顏色highmap

Question

我highmap的工作，我想就在highmap狀態懸停動態不同勢顏色。

，你可以看到不同的顏色，這是我做

var usMapChart , data = [] ; 
 
var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']); 
 
var UsMapdata = ([ 
 
\t {"value": 3,"code": "ma",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "ct",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "md",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "ny",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "in",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "nc",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "nh",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "wi",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "wa",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "vt",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "mn",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "me",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "or",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "nd",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "ia",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "mi",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "mt",'hovercolor':'#d8077a'}, 
 
\t {"value": 3,"code": "dc",'hovercolor':'#d8077a'}, 
 
    {"value": 2,"code": "nj",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "mo",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "de",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "fl",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "oh",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "pa",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "il",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ca",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "hi",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "va",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ga",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "tn",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "sc",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "la",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ky",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ms",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "al",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "az",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "co",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ks",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ut",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ne",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "wv",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "id",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "nm",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "sd",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "wy",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ak",'hovercolor':'#ff66c1'}, 
 
\t {"value": 2,"code": "ri",'hovercolor':'#ff66c1'}, 
 
\t 
 
\t {"value": 1,"code": "ar",'hovercolor':'#f6adcd'}, 
 
\t {"value": 1,"code": "tx",'hovercolor':'#f6adcd'}, 
 
\t {"value": 1,"code": "ok",'hovercolor':'#f6adcd'}, 
 
\t {"value": 1,"code": "nv",'hovercolor':'#f6adcd'}, 
 
\t 
 
\t 
 
\t 
 
]); 
 
var hoverColor =""; \t 
 
var hoverIndex ; 
 
var Pointhover ; 
 
    // Get the map data 
 
    // Get the map data 
 
    
 
\t \t 
 
$.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(); 
 
}); \t 
 

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

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

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

#container { 
 
    max-width: 600px; 
 
    height: 400px; 
 
    margin: 0 auto; 
 
} 
 
#container_map_tableDiv { 
 
    max-width: 600px; 
 
    margin: 3em auto; 
 
\t 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個bug，但似乎一個點設置不工作狀態。

你可以用負責對改變狀態設置圖形屬性的方法。

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/

我報的行爲，如u錯誤的Highcharts github。