做前端按地区(地图)分布监控数据展示用了 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  }
});

搞定。

highcharts-Highmaps 动态传入城市名称的更多相关文章

  1. highcharts 柱状图 动态加载

    highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...

  2. Python_动态参数、名称空间、作用域、作用域链、加载顺序、函数的嵌套、global、nonlocal

    1.动态参数 当实参数量与形参数量相等时,参数传递正常. def func1(a, b, c): pass func1(1, 2, 3) 当实参数量与形参数量不相等时,则会报错. def func1( ...

  3. ip获取所在城市名称等信息接口,及函数

    函数: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 ...

  4. MyBatis动态传入表名,字段名参数的解决办法---statementType用法

    statementType="STATEMENT" 要实现动态传入表名.列名,需要做如下修改 添加属性statementType="STATEMENT" 同时s ...

  5. Oracle列转行 参数动态传入iBatis使用示例

    Oracle行转列 参数动态传入iBatis使用示例 最近做了一个需求,需要获取工作流数据的各个节点的渠道数量信息,各渠道的费用信息~ 之前的需求是只需要获取渠道数据,所以做了渠道兼容,每个渠道数量的 ...

  6. Mybatis动态传入tableName--非预编译(STATEMENT)

    在使用Mybatis过程中,你可以体会到它的强大与灵活之处,由衷的为Mybatis之父点上999个赞!在使用过程中经常会遇到这样一种情况,我查询数据的时候,表名称是动态的从程序中传入的,比如我们通过m ...

  7. IOS百度地图获取所在的城市名称

    笔者的app要实现定位所在省和城市名称,借此总结巩固一下! @interface VenueListVC : BasePageTableViewVC<BMKLocationServiceDele ...

  8. MyBatis,动态传入表名,字段名的解决办法

    转载:http://luoyu-ds.iteye.com/blog/1517607 今天做项目,遇到的问题就是需求修改数据表的记录,而且字段名都不是固定的,也就是说是需要通过参数传入的, 本来这也不是 ...

  9. 修改OpenSSL默认编译出的动态库文件名称

    在 Windows 平台上调用动态链接库 dll 文件时,有两种方式:a) 隐式的加载时链接:使用 *.lib (导入库)文件,在 IDE 的链接器相关设置中加入导入库 lib 文件的名称,或在程序中 ...

随机推荐

  1. 排列组合函数next_permutation()

    next_permution(),按照字典序进行排列组合, 括号里的参数为类似sort里面的参数,用法相同 #include <bits/stdc++.h> using namespace ...

  2. 解决jquery animate({scrollTop$pos},500)与$(window).scroll方法冲突的问题

    当点击节点时 先移除$(window).on("scroll")监听事件 在animate动画结束之后再添加上 $('#J_tab li').on('click', functio ...

  3. SAP ABAP 日期相关函数

    获的两个日期之间的分钟数 data min TYPE i. CALL FUNCTION 'DELTA_TIME_DAY_HOUR' EXPORTING T1 = ' T2 = ' D1 = ' D2 ...

  4. DragQueryFile

    附件:http://files.cnblogs.com/xe2011/CSharp_DragQueryFile.rar using System.Runtime.InteropServices; th ...

  5. Android时间互换代码

    收藏备用. http://www.oschina.net/code/snippet_575610_22694 /** * 获取现在时间 * * @return 返回时间类型 yyyy-MM-dd HH ...

  6. MYSQL参数学习---------------- 张碧池

    http://pottievil.com/category/mysql/mysql%E5%8F%82%E6%95%B0/

  7. RecyclerView实现瀑布流效果(图文详解+源码奉送)

    最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...

  8. my_pnd_start

    终于有个雏形了,再给自己一些时间做做看吧.

  9. 获得Radio选中的后面文本框的值

    例如: 选中的radio的值在button中显示 代码如下: <!DOCTYPE html> <html lang="en" xmlns="http:/ ...

  10. PHP 数组转字符串,与字符串转数组

    implode 使用一个字符串将数组变成字符串 <?php $array = array('lastname', 'email', 'phone'); $comma_separated = im ...