highcharts-Highmaps 动态传入城市名称

做前端按地区（地图）分布监控数据展示用了 HIGHMAPS JAVASCRIPT MAPS 控件，很好很强大。

基础实现是这样的：调用插件动态传入需要展示的数据（data），插件会在地图数据（mapdata）中找到对应的区域，把值丢进去，然后在页面上渲染展示带有数据的区域数据分布地图。

mapdata 数据结构（已简化）：

1 [

2     {'hc-key' : 'cn-sh', 'name' : '上海'},

3     {'hc-key' : 'cn-zj', 'name' : '浙江'}

4 ]

data 数据结构：

1 [

2     { 'hc-key' : 'cn-sh', 'value' : 113 },

3     { 'hc-key' : 'cn-zj', 'value' : 44 }

4 ]

（这里值得注意的是，value 值不能带上引号如：'value' : '44' 就会导致插件报错无法渲染。）

插件通过 data 里的这个 hc-key 值去 mapdata （该数据存放在一个 js 文件内） 捞对应的区域信息详情，其中就包括地区的中文名称信息如：上海。就是这里出了一点小麻烦，我的中文名称可能会发生变动，譬如有时候是「上海」，但可能下一次下下次又会是 「上海 1」 ，「上海 2」。

常规思路是直接改数据源，重新加载数据源就好了。可是这个 mapdata 如我前面所说，是存在文件里的，那么一个人必须是疯了才会想去在前端动态修改保存一个文件吧，所以这条路不用想就直接跳过。
再想一下既然 data 里的 value 能进去 mapdata ，那么 name 一样也能进去。于是就这么愉快的决定，前端动态传 data 的时候根据需要带上（或不带则还是使用 mapdata 里默认的名称） name 属性。

 

解决方案：

动态传入 data 的数据结构：

1 [

2     { 'hc-key' : 'cn-sh', 'value' : 113, 'name' : '上海' },

3     { 'hc-key' : 'cn-zj', 'value' : 44 }

4 ]

接下来就是改造插件，能够接受我传入的 name 属性，在插件中（highmaps.js）找到 mapdata 数据渲染之前这段：

 1    if (mapData) {

 2　　　　　　...

 3 

 4                 if (options.allAreas) {

 5 

 6                     data = data || [];

 7 

 8                     // Registered the point ...

 9                     if (joinBy[1]) {

10                         each(data, function (point) {

11                             dataUsed.push(point[joinBy[1]]);

12                         });

13                     }

14 

15                     // 放这里 o(≧v≦)o

16 

17                     // Add those map points ...

18                     dataUsed = '|' + dataUsed.join('|') + '|'; 

19　　　　　　　　　　　　...

20                 }

21             }

在 「// 放这里 o(≧v≦)o 」 这个位置加入下面这个赋值改写 mapdata 的 name 属性的方法：

1 each(data, function (dataItem) {

2 　　if (dataItem["name"]) {

3 　　　　each(mapData, function (mapdataItem) {

4 　　　　　　mapdataItem.name = mapdataItem[joinBy[0]] == dataItem[joinBy[0]] ? dataItem.name : mapdataItem.name;

5　　　　});

6　　}

7 });

搞定。