highcharts-Highmaps 動態傳入城市名稱

做前端按地區（地圖）分布監控數據展示用了 HIGHMAPS JAVASCRIPT MAPS 控件，很好很強大。

基礎實現是這樣的：調用插件動態傳入需要展示的數據（data），插件會在地圖數據（mapdata）中找到對應的區域，把值丟進去，然后在頁面上渲染展示帶有數據的區域數據分布地圖。

mapdata 數據結構（已簡化）：

[
    {'hc-key' : 'cn-sh', 'name' : '上海'},
    {'hc-key' : 'cn-zj', 'name' : '浙江'}
]

data 數據結構：

[
    { 'hc-key' : 'cn-sh', 'value' : 113 },
    { 'hc-key' : 'cn-zj', 'value' : 44 }
]

（這里值得注意的是，value 值不能帶上引號如：'value' : '44' 就會導致插件報錯無法渲染。）

插件通過 data 里的這個 hc-key 值去 mapdata （該數據存放在一個 js 文件內） 撈對應的區域信息詳情，其中就包括地區的中文名稱信息如：上海。就是這里出了一點小麻煩，我的中文名稱可能會發生變動，譬如有時候是「上海」，但可能下一次下下次又會是 「上海 1」 ，「上海 2」。

常規思路是直接改數據源，重新加載數據源就好了。可是這個 mapdata 如我前面所說，是存在文件里的，那么一個人必須是瘋了才會想去在前端動態修改保存一個文件吧，所以這條路不用想就直接跳過。
再想一下既然 data 里的 value 能進去 mapdata ，那么 name 一樣也能進去。於是就這么愉快的決定，前端動態傳 data 的時候根據需要帶上（或不帶則還是使用 mapdata 里默認的名稱） name 屬性。

 

解決方案：

動態傳入 data 的數據結構：

[
    { 'hc-key' : 'cn-sh', 'value' : 113, 'name' : '上海' },
    { 'hc-key' : 'cn-zj', 'value' : 44 }
]

接下來就是改造插件，能夠接受我傳入的 name 屬性，在插件中（highmaps.js）找到 mapdata 數據渲染之前這段：

   if (mapData) {
 2　　　　　　...

                if (options.allAreas) {

                    data = data || [];

                    // Registered the point ...
                    if (joinBy[1]) {
                        each(data, function (point) {
                            dataUsed.push(point[joinBy[1]]);
                        });
                    }

                    // 放這里 o(≧v≦)o

                    // Add those map points ...
                    dataUsed = '|' + dataUsed.join('|') + '|'; 
19　　　　　　　　　　　　...
                }
            }

在 「// 放這里 o(≧v≦)o 」 這個位置加入下面這個賦值改寫 mapdata 的 name 屬性的方法：

each(data, function (dataItem) {
　　if (dataItem["name"]) {
　　　　each(mapData, function (mapdataItem) {
　　　　　　mapdataItem.name = mapdataItem[joinBy[0]] == dataItem[joinBy[0]] ? dataItem.name : mapdataItem.name;
5　　　　});
6　　}
});

搞定。