我使用Highcharts的Highmaps构建了自定义地图。我需要将句点（小数点）更改为逗号。我知道如何使用setOptions正常执行此操作，例如：
Highcharts.setOptions({
lang: {
drillUpText: "< < Regresar",
decimalPoint: ',',
thousandsSep: '.'
},
});
但是，已对地图的代码进行了自定义以更改工具提示信息，并且setOptions不再适用于将句点更改为逗号。我怀疑对我这样的高级人员来说，这是一个简单的解决方法。是否有JavaScript专家可以帮助我解决此问题？这是一个jsfiddle：http://jsfiddle.net/sstoker/L60jg274/
以下是相关的JS代码：
$(function() { //For point links
(function(H) {
H.Legend.prototype.setItemEvents = null;
})(Highcharts)
// 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]
];
// Create the chart
var chart = Highcharts.mapChart('container', {
chart: {
backgroundColor: '#f3f7fa',
map: 'countries/mx/mx-all',
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: { //For point links
series: {
events: {
legendItemClick: function(e) {
return false;
}
}
},
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',
events: {
legendItemClick: function() {
console.log(this)
}
},
dataClasses: [{
from: 0,
to: 3.000,
color: '#6497b1'
}, {
from: 3.001,
to: 4.500,
color: '#005b96'
}, {
from: 4.510,
to: 7.000,
color: '#03396c'
}, {
from: 7.001,
to: 10.000,
color: '#011f4b'
}]
},
legend: {
title: {
text: 'Desarrollo',
style: {
color: ( // theme
Highcharts.defaultOptions &&
Highcharts.defaultOptions.legend &&
Highcharts.defaultOptions.legend.title &&
Highcharts.defaultOptions.legend.title.style &&
Highcharts.defaultOptions.legend.title.style.color
) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 3,
symbolRadius: 5,
symbolHeight: 14
},
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}',
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);
}
},
});
});
setOptions用法是正确的解决方案。下一步是使用Highcharts.numberFormat功能。
演示：http://jsfiddle.net/BlackLabel/ay8m4pug/
相关代码：
Highcharts.setOptions({
lang: {
decimalPoint: ',',
...
}
});
...
tooltip: {
...
pointFormatter: function() {
...
firstRow = firstRow + " " + Highcharts.numberFormat(this.value);
...
}
},