Highcharts 在HighMaps上,如何在美国地图上显示州缩写而不是州名称,以及如何从点删除数据标签

Highcharts 在HighMaps上,如何在美国地图上显示州缩写而不是州名称,以及如何从点删除数据标签,highcharts,Highcharts,我正在使用HighMaps显示带有项目位置的美国地图。我想在地图上显示州的缩写,而不是全州名,所以用“AZ”代替“亚利桑那” 我也想不显示项目位置的标签。我只想显示符号(圆或三角形)。具体来说,我使用一些条件逻辑来根据数据中字段的内容确定它是“光伏电站”还是“污水处理站”。我不希望它在地图上显示为数据标签,但希望它显示在工具提示上。这是我的地图: 下面是JavaScript: Highcharts.getJSON('/pv/client/js/pv-soiling-map-data.json',

我正在使用HighMaps显示带有项目位置的美国地图。我想在地图上显示州的缩写,而不是全州名,所以用“AZ”代替“亚利桑那”

我也想不显示项目位置的标签。我只想显示符号(圆或三角形)。具体来说,我使用一些条件逻辑来根据数据中字段的内容确定它是“光伏电站”还是“污水处理站”。我不希望它在地图上显示为数据标签,但希望它显示在工具提示上。这是我的地图:

下面是JavaScript:

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}
    。就是这样!非常感谢!