Eval函数可以解析一些处理过的程序代码,达到可执行的状态。查了很多帖子,jqchart插件做折线图的时候,所有返回的数据都是eval处理的,但是我拿不出来。后来,我发现:
1.完全不需要eval处理,可以直接截取字符串(返回值要拼接好);
2.将[]添加到系列数据中已处理的字符串中;
以下是代码:
html页面的body标记中只有一个div id=' jqchart ' style=' width : 500 px。' height: 300px'/div;
脚本类型=' text/JavaScript ' src=' http : jquery . 1 . 8 . 2 . js '/script script type=' text/JavaScript ' src=' http 3360 jquery-jqchart-min . js '/script script type=' text/JavaScript ' $(function(){ $)。get('tgajax.php ',函数(data){ var dom=data.substring(0,data . length-1);//主要处理返回的数据,显然有一个','//var DOM=eval('(' DOM ')');//alert(DOM);$ ('# jqchart ')。jqchart ({title : {text : '折线图示例' }),坐标轴: [{location :' left ',最小值3360 1,最大值: 10,间隔: 1,}],Series : [{type :' line ',title :' Shanghai ',markers: null,//拐点没有用点标记。笔画样式: '蓝色',数据: [['JSON ',1],['per ',9],['perter ',3]]},{type :' line ',//line,列标题:' Beijing ',笔画样式:' red ',数据: [DOM]},]});});});/脚本后台处理页面我将使用简单的php,没有别的。
?phpinclude(' configaz . PHP ');//数据库连接在另一个文件中,因此这里不需要$ SQL='选择SID,sname,s价格,count (s价格)作为按sname列出的尚品组的价格编号'。$ query=MySQL _ query($ SQL);$ row=MySQL _ fetch _ array($ query);while($ row=MySQL _ fetch _ array($ query)){ $ price num=$ row[' price num '];$ sname=$ row[' sname '];} echo $str。='[''.$sname。','.$pricenum。'],';//拼接字符串,按照jqChart要求的字符串格式,当然数组更好,但遗憾的是,肯定不会有更好的方法,不过我刚开始学习,慢慢摸索。
我相信解决方案不仅限于以上,肯定还有更好的方案。欢迎大家一起学习,一起进步。
PS: Ajax读取数据,用jqchart显示图表。
最近需要在项目中展示图表效果,原来收集的图表插件终于有用了。
然而,与jqchart相比,仍然有许多不同之处。
达到效果:
我重写了jqchart。
首先要解决的是不显示x轴和y轴:
//使每个DIV//取消标题显示/* this.titleBox//Title=this . mkbox element(' t ',this.op.titletop,this.op.titletop)。appendo(this . jqcanvasbox)。CSS ('width ',this . op . width-this . op . title left)//safari 3 2007 . 12 . 4的修复。get(0);*///取消y轴数字显示/* this.scaleYBox//Y轴=this.mkboxelement ('y ',this.op.scaleyLeft,this.op.scaleyTop)。appendo(this . jqcanvasbox)。get (0。*///取消x轴分类显示/* this.scaleXBox//X轴=this.mkboxelement ('x ',this.op.scalexft,this.op.scalextop)。appendo(this . jqcanvasbox)。get(。*/其次,对于拐点文字,原来显示的是对应的数据值,现在需要显示对应的X轴名称:
if(x=op . width){ var dx=x-op . padding ll,dy=y-op . padding t;var dxx=i=0?(dx op . labeldataoffsetx-5 ' px '):(dx op . labeldataoffsetx-20 ' px ');//坐标点x轴偏移var dyy=i%2?(dy op . label data offset-25 ' px '):(dy op . label data offset-5 ' px ');//坐标点y轴偏移它。wrt text(//dx op . labeldataoffsetx-20 ' px ',dxx,//dy op.labelDataOffsetY - 10 'px ',dyy,//op.rows[i],//pre:坐标点数据值op.txtpointers[i],//cychai:坐标点文字op ',# jQchart-data-D-'(op . id).css('color ',(op.data.length==1)?#333':strokeStyle).css({'width':'100px ',' font-size ' : ' 12px ' });//cychai:样式控制使用默认的数据可以显示出来了。接下来就是和开发的协作了。
我希望可以使用创建交互式、快速动态网页应用的网页开发技术异步获取数据,然后在前台显示。
这里,我使用了一个示例页面chartdata.html,即需要的数据页
[{labelX : ['外观设计','便携性','易用性','电池待机','摄像功能','变焦],数据:[[5,7,2,3,9,4]]}]
在前台,我通过创建交互式、快速动态网页应用的网页开发技术请求该页面,对返回的json数据进行处理,传递给图表设置:
$(function(){ $).ajax({ url: 'chartdata.html ',type: 'GET ',success:函数(CDATA){ showDDChart(CDATA);} });函数showDDChart(CDATA){ var DD _ chart=eval(CDATA)[0];var图表设置={ config : { title : ' ',titleLeft: 70,labelX :dd_chart.labelX,//labelX :['外观设计','便携性','易用性','电池待机','摄像功能','变焦],scaleY : {min: 0,max:10,gap:2},width: 300 25,height: 125 50,paddingL : 10,paddingT : 10 },//data: [[5,3,1,8,4,9]]data : DD _ chart。数据};$('#canvasMyID ').jQchart(图表设置);} });完整的超文本标记语言页面:
头!-[if IE]MCE :脚本src=' http : excanvas-compressed。js ' MCE _ src=' http : excan vas-compressed。js ' type=' text/JavaScript '/MCE :脚本![endif]-MCE :脚本src=' http :3358 jsgt。org/lib/jquery/plugin/jqchart/sample/v 003/lib/jquery-1。2 .3 .量滴js ' MCE _ src=' http :3358 jsgt。org/lib/jquery/plugin/jqchart/sample/v 003/lib/jquery-1。2 .3 .量滴js ' type=' text- $(function(){ $).ajax({ url: 'chartdata.html ',type: 'GET ',success:函数(CDATA){ showDDChart(CDATA);} });函数showDDChart(CDATA){ var DD _ chart=eval(CDATA)[0];var图表设置={ config : { title : ' ',titleLeft: 70,labelX :dd_chart.labelX,//labelX :['外观设计','便携性','易用性','电池待机','摄像功能','变焦],scaleY : {min: 0,max:10,gap:2},width: 300 25,height: 125 50,paddingL : 10,paddingT : 10 },//data: [[5,3,1,8,4,9]]data : DD _ chart。数据};$('#canvasMyID ').jQchart(图表设置);} });/////MCE :脚本/正文/html OK,大功告成!完整示例我会放到我的资源里。
好久都没有用jquery ajax了,拼json数据都有些生疏了。还是喜欢开发这种有逻辑性的工作.