高图中的动态悬停颜色
Dynamic hover color in highmap
我使用 highmap,我想在悬停在 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>
我搜索了很多但没有找到,所以请帮助我。
我在网上找到了一些解决方案,但它只适用于旧版本的 highmap,不适用于最新版本。
你也可以在这里看到演示:http://dev.artoonsolutions.com/jignesh_kheni/map_demo/
不知道是不是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/
我将此行为报告为 Highcharts github。
我使用 highmap,我想在悬停在 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/
不知道是不是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/
我将此行为报告为 Highcharts github。