javascript - highmaps 中的工具提示不起作用。无法将 json 中的数据显示到 highmap 上

Question

我正在显示带有分类区域的美国 map 。 map 运行良好，但我无法使用 Highmap 中的工具提示显示 Json 文件中的值。

这是我的代码:

$.getJSON('../production/UsMapData/UsaMapData.json', function (data) {
	 $.each(data, function () {
         this.code = this.code.toUpperCase();
     });
Highcharts.mapChart('geoMap', {
 chart: {
     
     type: 'map'
    
    
 },
 title: {
     text: 'US'
 },

 legend: {
     enabled: true
 },

/* plotOptions: {
     map: {
         allAreas: false,
         joinBy: ['hc-a2', 'code'],
         dataLabels: {
             enabled: true,
             color: '#FFFFFF',
             formatter: function () {
                 if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                     return this.point.properties['iso-a2'];
                 }
             },
             format: null,
             style: {
                 fontWeight: 'bold'
             }
         },
         mapNavigation: {
             enabled: true,
             enableButtons: false
         },
         mapData: Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
         tooltip: {
             headerFormat: '',
             pointFormat: '{point.name}: <b>{series.name}</b>'
         }

     }
 },*/
 plotOptions: {
     map: {
         allAreas: false,
         animation: true,
         joinBy: ['postal-code','code'],
        
         dataLabels: {
             enabled: true,
             color: '#FFFFFF',
             formatter: function () {
                // if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
            	 console.log(this.point.code);
                    // return this.point.properties['hc-a2'];
                     return this.point.code;
                // }
             },
             format: '{point.code}',
             style: {
                 fontWeight: 'bold'
             }
         },
         data:data,
         mapData:Highcharts.maps['countries/us/us-all'],
         tooltip: {
             headerFormat: '',
             pointFormat: '{point.state}: <b>{point.views}</b>'
         }

     }
 },
 mapNavigation: {
     enabled: true,
     enableButtons: false
 },
 cursor: 'pointer',
     
 

 series: [{
	 name: 'NorthEast',

	 data: $.map(['AL', 'AK', 'AR', 'AZ','CA','CO','CT'], function (code) {
         return { code:code };
     }),
     
 },{
	 name: 'MidWest',
	 enabled: false,
	 data: $.map(['DE', 'DC', 'FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD'], function (code) {
         return { code: code };
     })
 }, {
     name: 'SouthWest',
     enabled: false,
     data: $.map(['MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY'], function (code) {
         return { code: code };
     })
 }, {
     name: 'SouthEast',
     enabled: false,
     data: $.map(['NC','ND','OH','OK','OR','PA'], function (code) {
         return { code: code };
     })
 }, {
     name: 'West',
     enabled: false,
     data: $.map(['RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'], function (code) {
         return { code: code };
     })
 }]
});
});

这是 Json 文件:

[
  {
    "code": "al",
    "state": "Alabama",
    "views": -22.19
  },
  {
    "code": "ak",
    "state": "Alaska",
       "views": -22.19
    
  },
  {
    "code": "az",
    "state": "Arizona",
    "views": -9.06
  },
  {
    "code": "ar",
    "state": "Arkansas",
    "views": -23.69
  },
  {
    "code": "ca",
    "state": "California",
    "views": 23.12
  },
  {
    "code": "co",
    "state": "Colorado",
    "views": 5.37
  },
  {
    "code": "ct",
    "state": "Connecticut",
    "views": 17.33
  },
  {
    "code": "de",
    "state": "Delaware",
    "views": 18.63
  },
  {
    "code": "dc",
    "state": "District of",
    "views": 83.63
  },
  {
    "code": "",
    "state": "ColumbiaDistrict of Columbia",
    "views": ""
  },
  {
    "code": "fl",
    "state": "Florida",
    "views": 0.88
  },
  {
    "code": "ga",
    "state": "Georgia",

    "views": -7.82
  },
  {
    "code": "hi",
    "state": "Hawaii",

    "views": 42.71
  },
  {
    "code": "id",
    "state": "Idaho",

    "views": -31.91
  },
  {
    "code": "il",
    "state": "Illinois",

    "views": 16.87
  },
  {
    "code": "in",
    "state": "Indiana",

    "views": -10.2
  },
  {
    "code": "ia",
    "state": "Iowa",

    "views": 5.81
  },
  {
    "code": "ks",
    "state": "Kansas",

    "views": -21.72
  },
  {
    "code": "ky",
    "state": "Kentucky",

    "views": -22.69
  },
  {
    "code": "la",
    "state": "Louisiana",

    "views": -17.21
  },
  {
    "code": "me",
    "state": "Maine (at-large)",

    "views": 15.29
  },
  {
    "code": "md",
    "state": "Maryland",

    "views": 26.08
  },
  {
    "code": "ma",
    "state": "Massachusetts",

    "views": 23.14
  },
  {
    "code": "mi",
    "state": "Michigan",

    "views": 9.5
  },
  {
    "code": "mn",
    "state": "Minnesota",

    "views": 7.69
  },
  {
    "code": "ms",
    "state": "Mississippi",

    "views": -11.5
  },
  {
    "code": "mo",
    "state": "Missouri",

    "views": -9.38
  },
  {
    "code": "mt",
    "state": "Montana",

    "views": -13.65
  },
  {
    "code": "ne",
    "state": "Nebraska",

    "views": -21.78
  },
  {
    "code": "nv",
    "state": "Nevada",
 
    "views": 6.68
  },
  {
    "code": "nh",
    "state": "New Hampshire",

    "views": 5.58
  },
  {
    "code": "nj",
    "state": "New Jersey",
  
    "views": 17.81
  },
  {
    "code": "nm",
    "state": "New Mexico",

    "views": 10.15
  },
  {
    "code": "ny",
    "state": "New York",
   
    "views": 28.18
  },
  {
    "code": "nc",
    "state": "North Carolina",
  
    "views": -2.04
  },
  {
    "code": "nd",
    "state": "North Dakota",
   
    "views": -19.63
  },
  {
    "code": "oh",
    "state": "Ohio",
 
    "views": 2.98
  },
  {
    "code": "ok",
    "state": "Oklahoma",
   
    "views": -33.54
  },
  {
    "code": "or",
    "state": "Oregon",
 
    "views": 12.09
  },
  {
    "code": "pa",
    "state": "Pennsylvania",
 
    "views": 5.39
  },
  {
    "code": "ri",
    "state": "Rhode Island",
 
    "views": 27.46
  },
  {
    "code": "sc",
    "state": "South Carolina",
    
    "views": -10.47
  },
  {
    "code": "sd",
    "state": "South Dakota",
   
    "views": -18.02
  },
  {
    "code": "tn",
    "state": "Tennessee",
   
    "views": -20.4
  },
  {
    "code": "tx",
    "state": "Texas",
   
    "views": -15.78
  },
  {
    "code": "ut",
    "state": "Utah",
  
    "views": -48.04
  },
  {
    "code": "vt",
    "state": "Vermont",
   
    "views": 35.6
  },
  {
    "code": "va",
    "state": "Virginia",
   
    "views": 3.87
  },
  {
    "code": "wa",
    "state": "Washington",
   
    "views": 14.87
  },
  {
    "code": "wv",
    "state": "West Virginia",
    
    "views": -26.76
  },
  {
    "code": "wi",
    "state": "Wisconsin",
   
    "views": 6.94
  },
  {
    "code": "wy",
    "state": "Wyoming",
    
    "views": -40.82
  }
]

map 在分类区域中按预期工作，但主要是我无法显示 json 数据。

Answer 1

当前您的系列数据设置为:

data: $.map(['NC','ND','OH','OK','OR','PA'], function (code) {
    return { code: code };
})

这意味着数据只是一个仅包含 code 变量的对象数组。 views(来自 json 对象)永远不会放入您的系列数据中，因此永远不会包含在 joinBy 之后生成的 Point 中。

本质上，您还必须包含 View ，例如通过grep而不是maping。例如使用辅助函数:

function getAreasByCode(arrayOfData, arrayOfCodes) {
    return $.grep(arrayOfData, function(entry) {
        return arrayOfCodes.indexOf(entry.code) >= 0;
    });
}

以及新的系列数据规范:

data: getAreasByCode(data, ['AL', 'AK', 'AR', 'AZ','CA','CO','CT'])

参见this JSFiddle example它在行动中。