我已经根据 Highcharts 提供的标准 map 构建了一张 map 。但是，它已被定制为在工具提示上显示两组数据而不是一组，并且当一个人点击一个状态时，它们会链接到另一个页面，其中包含该状态的信息。我面临的问题是我需要更改其中一个州的名称。我有执行此操作的代码，但由于我已经自定义了 map ，所以我很难让所有内容协同工作。基本上，当我添加更改名称的代码时，它会删除所有州的工具提示中的一组数据。任何人都可以帮我解决这个问题(也许是伟大的@ppotaczek :)？具体来说，我需要在工具提示中将 Distrito Federal 更改为 CDMX，同时不从工具提示中删除这两个数据集。
这是一个 jsfiddle:https://jsfiddle.net/sstoker/3cdaqkyx/6/#save
这是相关的 javascript 代码:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
const data = [
['mx-3622', 0.00],
['mx-bc', 5.59],
['mx-bs', 4.05],
['mx-so', 4.77],
['mx-cl', 6.91],
['mx-na', 8.88],
['mx-cm', 8.01],
['mx-qr', 4.87],
['mx-mx', 5.01],
['mx-mo', 0.089],
['mx-df', 8.12],
['mx-qt', 7.32],
['mx-tb', 3.17],
['mx-cs', 1.15],
['mx-nl', 6.88],
['mx-si', 6.64],
['mx-ch', 2.19],
['mx-ve', 0.66],
['mx-za', 8.03],
['mx-ag', 10],
['mx-ja', 3.35],
['mx-mi', 3.91],
['mx-oa', 0.8],
['mx-pu', 1.53],
['mx-gr', 0.0],
['mx-tl', 2.95],
['mx-tm', 5.47],
['mx-co', 9.46],
['mx-yu', 8.62],
['mx-dg', 4.47],
['mx-gj', 8.33],
['mx-sl', 4.35],
['mx-hg', 4.75]
];
const data1 = [
['mx-3622', 0.0],
['mx-bc', 13],
['mx-bs', 21],
['mx-so', 17],
['mx-cl', 10],
['mx-na', 3],
['mx-cm', 8],
['mx-qr', 16],
['mx-mx', 15],
['mx-mo', 31],
['mx-df', 6],
['mx-qt', 9],
['mx-tb', 24],
['mx-cs', 28],
['mx-nl', 11],
['mx-si', 12],
['mx-ch', 26],
['mx-ve', 30],
['mx-za', 7],
['mx-ag', 1],
['mx-ja', 23],
['mx-mi', 22],
['mx-oa', 29],
['mx-pu', 27],
['mx-gr', 32],
['mx-tl', 25],
['mx-tm', 14],
['mx-co', 2],
['mx-yu', 4],
['mx-dg', 19],
['mx-gj', 5],
['mx-sl', 20],
['mx-hg', 18]
];
data.forEach(function(el, i) {
el.push(data1[i][1])
});
// Create the chart
var chart = Highcharts.mapChart('container', {
chart: {
backgroundColor: '#f3f7fa',
map: 'countries/mx/mx-all',
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
title: {
text:'<span style="font-size:9.5px"> \< Bajo | Desarrollo democrático | Alto \> </span>',
}
},
plotOptions: { //For point links
map: {
point: {
events: {
click: function() {
$('#map1').trigger(this['hc-key']);
}
}
}
}
},
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 0
}
},
chartOptions: {
chart: {
events: {
load: function() {
this.renderer.image('http://165.22.82.145/wp-content/uploads/2019/09/IDDMEX-Logo.svg',
480, // x
335, // y
75, // width
40, // height
).add();
}
}
}
}
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0,
maxColor: 'blue',
stops: [
[.0,'#6497b1'],
[.249,'#6497b1'],
[.25,'#005b96'],
[.499,'#005b96'],
[.5,' #03396c'],
[.749,'#03396c'],
[.75,'#011f4b']
]
},
series: [{
keys: ['hc-key', 'value', 'rank'],
data: data,
name: 'Índice 2018',
states: {
hover: {
color: '#f3bbd3'
},
},
dataLabels: {
enabled: false,
format: '{point.name}',
}
}],
tooltip: {
pointFormat: ' {point.name} {point.value} <br>Ranking: {point.rank}'
},
});
});
这里是一些更改名称的 javascript 代码，但在我添加第二个数据系列时删除了它。
tooltip: {
pointFormatter: function() {
if (this['hc-key'] === 'mx-df') {
return 'CDMX: ' + this.value;
}
return this.name + ' ' + this.value;
}
}
最佳答案
下面是这个问题的解决方案。将此代码添加到工具提示对象。
pointFormatter: function() {
var firstRow = (this['hc-key'] === 'mx-df')
? "CDMX"
: this.name;
firstRow = firstRow + " " + this.value;
var secondRow = "Ranking: " + this.rank;
return (firstRow + "<br />" + secondRow);
}
关于javascript - 高 map : Change state name on tooltip with various sets of data，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59042418/