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

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

ammap和amcharts的案例--好用可扩展的javascript图表插件

ammap和amcharts的案例--好用可扩展的javascript图表插件

问题就在使用图表的过程中了,主要是右下角的那个折线图,在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循环强大。在数组中,它可以轻松的攻取数组索引及对应的值。例:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同
$.each(_mozi,function(key,val){
    //回调函数有两个参数,第一个是元素索引,第二个为当前值
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);
});

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

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

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

$.grep(_mozi,function(val,key){
    //过滤函数有两个参数,第一个为当前元素,第二个为元素索引
    if(val=='墨子'){
        alert('数组值为 墨子 的下标是: '+key);
    }
});

var _moziGt1=$.grep(_mozi,function(val,key){ return key>1; }); alert(’_mozi数组中索引值大于1的元素为: ‘+_moziGt1);

var _moziLt1=$.grep(_mozi,function(val,key){ return key>1; },true); //此处传入了第三个可靠参数,对过滤函数中的返回值取反 alert(’_mozi数组中索引值小于等于1的元素为: ‘+_moziLt1);


阅读全文

做一个基于中国地图的数据展示。查找了一些资料,打算使用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啦。

div放到flash之上-ammap-css-javascript-flash

div放到flash之上-ammap-css-javascript-flash


阅读全文

话不多说,直接上代码和注释,需要什么一看就明了。

//jQuery获取Select选择的Text和Value:

$("#select_id").change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find(“option:selected”).text(); //获取Select选择的Text var checkValue=$("#select_id").val(); //获取Select选择的Value var checkIndex=$("#select_id “).get(0).selectedIndex; //获取Select选择的索引值 var maxIndex=$("#select_id option:last”).attr(“index”); //获取Select最大的索引值

//jQuery设置Select选择的Text和Value:

$("#select_id “).get(0).selectedIndex=1; //设置Select索引值为1的项选中 $("#select_id “).val(4); //设置Select的Value值为4的项选中 $("#select_id option”).attr(“selected”, true); //设置Select的Text值为jQuery的项选中

//jQuery添加/删除Select的Option项:

$("#select_id”).append("<option value=‘Value’>Text</option>"); //为Select追加一个Option(下拉项) $("#select_id").prepend("<option value=‘0’>请选择</option>"); //为Select插入一个Option(第一个位置) $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) $("#select_id option[index=‘0’]").remove(); //删除Select中索引值为0的Option(第一个) $("#select_id option[value=‘3’]").remove(); //删除Select中Value=‘3’的Option $("#select_id option").remove(); //删除Select中Text=‘4’的Option


阅读全文

一、什么是web server log 和 page tagging

**web server log:**使用软件将原始数据解析为有用的数据。主要的工具有awstats、webtrends(收费)。

以下为具体的服务器日志:

202.80.215.14 - - [10/Mar/2012:01:29:59 -0700] "GET www.domain.com/index.php HTTP/1.1" 200 99314 "-" "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1045 Safari/532.5"

web server log主要可统计到的数据为:

Apache日志包含的各字段内容及其含义

Apache日志包含的各字段内容及其含义


阅读全文

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

Google Analytics的数据采集整体功能架构

Google Analytics的数据采集整体功能架构

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

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

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

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

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

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

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


阅读全文

作者的图片

DigDeeply

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

Web Development Engineer

Beijing China