最近在使用ammap和amcharts做一些数据可视化展现的工作,amcharts图表功能真的很强大,可自定义的属性很多。这是其官网文档链接。可以简单看看文档,会发现有很多属性,可以对图表中的每块表示数据的区域绑定事件,可以是一个url,也可以是一个js,怎么样,只有这两项,就绝对能满足很多扩展的需要了吧。

这是一个我做的例子,使用了ammap和amcharts,左边中国地图,不同省份的数据不一样,颜色代表不同等级的数据;右边是amcharts做的柱状图和折线图。

问题就在使用图表的过程中了,主要是右下角的那个折线图,在chrome、firefox、opera和IE9下均看过了,没有问题,可是到别人机器上,用的IE8,发现右下角的折线图出问题了。于是开始了JS的调试之旅,使用IE9的开发人员工具,可以很方便的调到IE7和IE8模式,之前一直都是firefox的firebug,现在一直都在用chrome,今天用了用IE9的调试工具,发现也挺好用的,主要是它有一个选项,可以设置为-始终从服务器中刷新,这样,每次IE运行获得的JS和CSS文件等,都不会是缓存中来的,调试起来很方便,不用总去清缓存。见下图:

阅读全文

jQuery的数组处理、便捷、功能齐全。最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生JavaScript数组不能企及的功能。最近时间紧迫,今天抽了些时间回过头来看jQuery中文文档中对数组的介绍,顺便对jQuery数组做个总结,温故而知新。

强烈建议你打开DEMO演示后再看下面的详解:http://mrthink.net/demo/ijq20101125.htm

1. $.each(array, [callback]) 遍历[常用]

解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回false, 其它返回值将被忽略。

each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大。在数组中,它可以轻松的攻取数组索引及对应的值。例:

相对于原生的for..in,each更强壮一点。for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取。

2. $.grep(array, callback, [invert])过滤数组[常用]

解释: 使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回true以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串。

阅读全文

做一个基于中国地图的数据展示。查找了一些资料,打算使用ammap,研究一番之后,终于明白一些。

通过设定数据文件ammap_data.xml中的area标签的url属性,可以设置为一个javascript:functionname();来调用一个JS函数。这下容易多了,可以通过JS去获得数据,添加到一个层,然后显示出来即可。

但是实践的时候又遇到一个问题,不管怎么设置层的CSS值,包括position,z-index,left,top 啊等等,层总是被flash给遮挡住,。查了点资料,原来flash是有一个属性设置的,可以设置是否置顶,不会被其它元素遮挡住。那么只要改一下就可以了。

ammap是用了封装好的一个swfobject类来生成flash的相关参数的,并且这个类是被压缩了的,。但是只要格式化一下就OK了。

然后找到标签,在其中加入,由于两边有双引号,自己注意加反斜线的转义。

好,现在试一下,诶?怎么不行?用IE看一下,结果IE下是可以的,但是chrome和firefox中都办不到。不用急,再在swfobject类中找到标签,对它加一个属性wmode=”opaque”,注意加转义字符。然后再打开看下效果。OK啦。

阅读全文

Google Analytics功能非常强大,只要在网站的页面上加入一段代码,就可以提供的丰富详尽的图表式报告。Google Analytics的数据采集功能是采用AJAX技术来实现,整体架构如图所示:

我们都知道在使用Google Analytics需要在网站上加上跟踪代码(Google Analytics Tracking Code,简称GATC) ,下面我们就来研究下跟踪代码是如何进行工作的。

谷歌分析跟踪代码(GATC) 检索网页数据如下:

浏览器请求的网页包含跟踪代码。

GATC创建并初始化一个对象的属性与网络相关的跟踪ID在代码中。

GATC执行你自定义任何跟踪方法。

跟踪代码初始化和管理以下信息:跟踪检索查看是否包括广告系列;收集HTTP请求中的各种用户信息的到Google GATC。

将访问者HTTP请求包含GATC跟踪信息收集到参数名单。

阅读全文

作者的图片

DigDeeply

Technology Stack: Golang/PHP/Openresty, and so on…

Web Development Engineer

Beijing China