最近在使用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文件等,都不会是缓存中来的,调试起来很方便,不用总去清缓存。见下图:

IE9-开发人员工具-清缓存-始终从服务器中刷新

IE9-开发人员工具-清缓存-始终从服务器中刷新

然后就跟调反汇编一样的,,开始调试JS了(最让人纠结了~~)。。通过设置为-“错误时中断”,从js中出问题的地方开始调试,然后一层层往父节点找出问题的原因,先是发现有些地方传递的参数有问题,为NAN,然后开始找这个错误数据是哪来的,继续找,最后发现是图表中传递的时间参数发生了问题,最终定位到了问题所在:

$.ajax({
            url: '/xxx/yyy/getProvinceDetial',
            data: {
                province:province, product: product, isp: isp
            },
            dataType: 'json',
            type: 'post',
            beforeSend:function(){
                    $('#innerinChart').append('<center id="loading">加载中,请稍候...</center>');
            },
            success: function(data){
                if( data.status === 0 ){
                    alert(data.info);
                }else{
                    $('#loading').remove();
                    $.each(data.info.data, function(k,v){
                         var newDate = new Date(k);
                        var object = {date: newDate};
                            $.each(v, function(name, value){
                                object[name] = value;
                          });
                          chartData.push(object);
                    });
                    $.each(data.info.keys, function(k,v){
                        // console.log(v);

                        var graphN = new AmCharts.AmGraph();
                        graphN.valueAxis = valueAxis1; // we have to indicate which value axis should be used
                        graphN.title = v;
                        graphN.valueField = v;
                        graphN.bullet = "square";
                        graphN.lineThickness = 4;
                        chart.addGraph(graphN);

                    });
                }

            }
        });

在一个Ajax请求中,把获得的字符串形式的时间参数,通过js下的 Date() 函数转化为时间格式的数据,在IE9+和chrome、firefox下均可直接运行,但是在IE7和IE8下会无法转化,返回NAN的数据(IE6没试,估计更不行,也不想再做什么东西都要去专门适配IE6了,让它早死早超生吧)。

但是问题还是需要解决啊,所以查了点资料,看看如何在IE7/8下,能把字符串格式数据转化为时间格式,找到了这个资料,有很多JS的小知识,大家可以保存起来,找时间看看,说不准哪天你做东西碰到问题了,也能在这里边找到解决办法。为了保险,我自己把这个页面也保存了一份

在这里,我们可以看到,它给了一个把字符串格式的时间转化为时间格式的函数。

An Extended ISO 8601 local Date format YYYY-MM-DD can be parsed to a Date with the following:-

/**Parses string formatted as YYYY-MM-DD to a Date object.
   * If the supplied string does not match the format, an
   * invalid Date (value NaN) is returned.
   * @param {string} dateStringInRange format YYYY-MM-DD, with year in
   * range of 0000-9999, inclusive.
   * @return {Date} Date object representing the string.
   */
  function parseISO8601(dateStringInRange) {
    var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
        date = new Date(NaN), month,
        parts = isoExp.exec(dateStringInRange);

    if(parts) {
      month = +parts[2];
      date.setFullYear(parts[1], month - 1, parts[3]);
      if(month != date.getMonth() + 1) {
        date.setTime(NaN);
      }
    }
    return date;
  }

我们只要把这个函数拿来,替代原来的Date()函数就可以啦。