码迷,mamicode.com
首页 > 其他好文 > 详细

highcharts-Highmaps 动态传入城市名称

时间:2014-07-06 22:26:49      阅读:446      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

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

搞定。

highcharts-Highmaps 动态传入城市名称,布布扣,bubuko.com

highcharts-Highmaps 动态传入城市名称

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/muriel/p/3824490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!