Jquery插件jqplot使用小记

      最近开发web ui使用的Jquery插件是Jqplot。

      Jqplot资料的首选资源是www.jqplot.com。在example和doc里面有各种用的例子和资料。个人推荐从download上下载最近的打包。这里面有很多现成的代码可以供你研究和修改。

      在CSDN上也有很多同志使用和发布了许多关于jqplot的配置信息。个人认为比较实用的是：http://blog.csdn.net/gaoyusi4964238/archive/2009/07/25/4378459.aspx

      这个日志里面对jqplot的配置比较全。对于我这种新手可以看着example里的例子参照这个日志的配置详解进行修改和测试。

      在项目中。我主要使用的japlot插件是dateAxisRenderer这个插件。

      这个插件是以时间为单位，所以对dateAxisRenderer这个插件使用比较多，首先讲下这个插件的原理吧。

      $.jqplot('jqplottest',[tempArray],{
                        series:[{showMarker:false}],
                        axes:{
                                xaxis:{
                                renderer:$.jqplot.DateAxisRenderer,
                                tickInterval:'10 minutes',
                                tickOptions:{
                                        formatString: '%R',
                                        show: true,
                                }
                        },
                        yaxis:{
                                tickOptions:{
                                formatString:'%.2f'
                                }
                        }
                        }
                });

      这里我们在x轴上使用了dateAxisRenderer渲染器。首先这个渲染器对tempArray的数据进行解析。我们的tempArray数据结构进行解释。

                var tempDate = new Date();
                for(var i in tempData){
                     tempDate.setTime(globalTimeStamp[1]-3600000+i*60000);
                    var tempString=tempDate.getDate()+'/'+tempDate.getMonth()+'/'+tempDate.getFullYear();
                  tempString+=' '+tempDate.getHours()+':'+tempDate.getMinutes();
                        tempArray.push([tempString,Number(tempData[i])]);
                }

 

      我们使用的是date这个数据结构。具体API在http://www.w3school.com.cn/js/jsref_obj_date.asp

      这里我们可以看到我们的每个点的元素包括一个时间点，一个数据。我们的数据里时间点的格式是："day/month/year空格hour:minute "。通过这个时间点。dateAxisRenderer确定时间。后面可以通过其他的 tickInterval:'' ,         //横（纵）坐标刻度间隔值，可为日期字符串 等进行配置。这里可以通过我们先前说的通过那些example进行调试。。

      当然我在下载的文档中找到了对dateAxisRenderer的具体解释。里面又很多配置....../Downloads/dist/docs/files/plugins/jqplot-dateAxisRenderer-js.html 。。

       再次对http://blog.csdn.net/gaoyusi4964238/archive/2009/07/25/4378459.aspx博文的博主表示感谢。信息很全。配置很多。帮助很大。

       希望大家快快上手吧。红色的内容比较关键。