Highcharts 在HighMaps上,如何在美国地图上显示州缩写而不是州名称,以及如何从点删除数据标签
我正在使用HighMaps显示带有项目位置的美国地图。我想在地图上显示州的缩写,而不是全州名,所以用“AZ”代替“亚利桑那” 我也想不显示项目位置的标签。我只想显示符号(圆或三角形)。具体来说,我使用一些条件逻辑来根据数据中字段的内容确定它是“光伏电站”还是“污水处理站”。我不希望它在地图上显示为数据标签,但希望它显示在工具提示上。这是我的地图: 下面是JavaScript:Highcharts 在HighMaps上,如何在美国地图上显示州缩写而不是州名称,以及如何从点删除数据标签,highcharts,Highcharts,我正在使用HighMaps显示带有项目位置的美国地图。我想在地图上显示州的缩写,而不是全州名,所以用“AZ”代替“亚利桑那” 我也想不显示项目位置的标签。我只想显示符号(圆或三角形)。具体来说,我使用一些条件逻辑来根据数据中字段的内容确定它是“光伏电站”还是“污水处理站”。我不希望它在地图上显示为数据标签,但希望它显示在工具提示上。这是我的地图: 下面是JavaScript: Highcharts.getJSON('/pv/client/js/pv-soiling-map-data.json',
Highcharts.getJSON('/pv/client/js/pv-soiling-map-data.json', function (data) {
data.map(function(elem) {
if (elem.Measurement_type == 'Soiling station') {
elem.name = 'Soiling Station';
elem.marker = {symbol: 'triangle'};
} else {
elem.name = 'PV Station';
elem.marker = {symbol: 'rectangle'};
}
if (elem.Sratio_all_data < 0.96) {
elem.color = '#648fff';}
else if (elem.Sratio_all_data >= 0.96 && elem.Sratio_all_data < .98) {
elem.color = '#785ef0';}
else if (elem.Sratio_all_data >= 0.98 && elem.Sratio_all_data < .99) {
elem.color = '#fe6100';}
else if (elem.Sratio_all_data >= 0.99) {
elem.color = '#ffb000';
} else {
elem.color = '#dc267f';}
});
Highcharts.mapChart('container', {
chart: {
map: 'countries/us/us-all'
},
title: {
text: undefined
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
legend: {
title: {
text: 'SRatio Range'
},
enabled: false,
align: 'right',
layout: 'vertical',
verticalAlign: 'bottom',
itemMarginTop: 10
},
series: [{
name: 'Map',
color: '#E0E0E0',
dataLabels: {
enabled: true,
format: '{point.name}'
},
enableMouseTracking: false,
borderColor: '#606060',
nullColor: '#eafaec',
showInLegend: false
}, {
type: 'mappoint',
showInLegend: false,
data: data,
minSize: 1,
maxSize: '25',
point: {
events: {
click: function() {
this.series.chart.update({
tooltip: {
enabled: true
}
});
},
mouseOut: function() {
this.series.chart.update({
tooltip: {
enabled: false
}
})
}
},
valueDescriptionFormat: '{point.name}, {point.site}.'
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><td><b>{point.name}</b><br/><b>Site:</b> {point.site}<br/><b>Tilt:</b> {point.tilt}<br/><b>County:</b> {point.county}<br/><b>Mounting:</b> {point.mounting}<br/><b>Months/data set:</b> {point.#_of_Months_in_dataset}<br/><b>Median Srate:</b> {point.median_Srate}<br/><b>Sratio:</b> {point.Sratio_all_data}<br/><b>Annual Sratio:</b> {point.annualSratio}<br/><b>January Sratio:</b> {point.January_Srate}<br/><b>February Sratio:</b> {point.February_Srate}<br/><b>March Sratio:</b> {point.March_Srate}<br/><b>April Sratio:</b> {point.April_Srate}<br/><b>May Sratio:</b> {point.May_Srate}<br/><b>June Sratio:</b> {point.June_Srate}<br/><b>July Sratio:</b> {point.July_Srate}<br/><b>August Sratio:</b> {point.August_Srate}<br/><b>September Sratio:</b> {point.September_Srate}<br/><b>October Sratio:</b> {point.October_Srate}<br/><b>November Sratio:</b> {point.November_Srate}<br/><b>December Sratio:</b> {point.December_Srate}</td></tr>',
footerFormat: '</table>',
valueDecimals: 2
}
}]
});
});
Highcharts.getJSON('/pv/client/js/pv soiling map data.json',函数(数据){
数据映射(函数(elem){
如果(元素测量\u类型==‘污染站’){
elem.name=‘污水处理站’;
elem.marker={symbol:'triangle'};
}否则{
元素名称=‘光伏电站’;
elem.marker={symbol:'rectangle'};
}
如果(元素统计所有数据<0.96){
elem.color='#648fff';}
否则如果(elem.Sratio_all_data>=0.96和&elem.Sratio_all_data<.98){
elem.color='#785ef0';}
else if(elem.Sratio_all_data>=0.98&&elem.Sratio_all_data<.99){
elem.color='#fe6100';}
else if(elem.Sratio_all_data>=0.99){
元素颜色='#ffb000';
}否则{
elem.color='#dc267f'}
});
Highcharts.mapChart('容器'{
图表:{
地图:“国家/我们/我们所有人”
},
标题:{
文本:未定义
},
学分:{
已启用:false
},
出口:{
已启用:false
},
工具提示:{
已启用:false
},
图例:{
已启用:false
},
地图导航:{
启用:对,
按钮选项:{
垂直排列:“顶部”
}
},
图例:{
标题:{
文本:“SRatio范围”
},
启用:false,
对齐:“右”,
布局:“垂直”,
垂直排列:“底部”,
项目编号:10
},
系列:[{
名称:'地图',
颜色:'#e0',
数据标签:{
启用:对,
格式:“{point.name}”
},
enableMouseTracking:false,
边框颜色:'#606060',
nullColor:“#eafaec”,
showInLegend:false
}, {
键入:“mappoint”,
showInLegend:false,
数据:数据,
minSize:1,
最大尺寸:'25',
要点:{
活动:{
单击:函数(){
此文件为.series.chart.update({
工具提示:{
已启用:true
}
});
},
mouseOut:function(){
此文件为.series.chart.update({
工具提示:{
已启用:false
}
})
}
},
valueDescriptionFormat:“{point.name},{point.site}。”
},
工具提示:{
分享:是的,
是的,
总部:'',
pointFormat:{point.name}
Site:{point.Site}
Tilt:{point.Tilt}
Country:{point.County}
Mounting:{point.Mounting}
月/数据集:{point.}月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/月/日
二月:{point.二月{Srate}
三月{point.三月}
四月{point.四月}
五月{point.五月}
六月{point.六月}
七月{point七月}
八月{point八月}
九月}
{point.十月{br/>十一月{point.十一月}
十二月{point.十二月},
页脚格式:“”,
数值小数:2
}
}]
});
});
我试图复制您的代码,但没有成功。getJSON功能中使用的路径可能是本地路径
演示:
但我认为我能够帮助解决你们的问题
dataLabels.format
设置为'{point.code}'
或'{point.postal code}'
dataLabels.enabled
设置为false,禁用dataLabels
演示:谢谢你,塞巴斯蒂安。这确实解决了我的第二个问题。但是州的缩写词在使用这两个词的州上都没有显示。州没有显示标签。请尝试将
数据标签。格式设置为{point.properties.postalcode}
。就是这样!非常感谢!