使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法


Posted in Javascript onNovember 26, 2015

eval函数可以把一些处理过程序代码进行解析从而达到可以执行的一个状态,查了很多帖子,jqchart插件做折线图时,处理返回数据时全都是eval,但我怎么也弄不出来,后来发现:

1、根本不需要eval处理,直接截取字符串即可(返回值要拼接好);

2、处理好的字符串放进series的data里要加上[];

下面是代码:

html页面<body>标签里面只放了一个<div id="jqChart" style="width: 500px; height: 300px;"></div>;

<script>里面
<script type="text/javascript" src="jquery.1.8.2.js"></script>
<script type="text/javascript" src="jquery-jqChart-min.js"></script>
<script type="text/javascript">
$(function () {
 $.get("tgajax.php",function(data){
  var dom = data.substring(0,data.length-1);//主要是对返回数据的处理,后面很明显多了一个","
  //var dom = eval('(' + dom + ')'); 
  //alert( dom);
 $('#jqChart').jqChart({
  title: { text: '线形图示例' },
  axes: [
   {
    location: 'left',
    minimum: 1,
    maximum: 10,
    interval: 1,
   }
  ],
   series: [
   {
    type: 'line',
    title:'上海',
    markers: null,//拐点不用圆点标示 
    strokeStyle: 'blue' , 
    data: [['json', 1], ['per', 9], ['perter', 3]]
   },
   {
    type: 'line',//line,Column
    title:'北京',
    strokeStyle: 'red' , 
    data:[dom]
   },
   ]
  }); 
});
});
</script>

后台处理页面我就用简单的php弄了,别的也不会

<?php
include ("configaz.php"); //数据库连接在另一个文件内,这里就不弄了
 $sql="select sid,sname,sprice,count(sprice) as pricenum from shangpin group by sname";
 $query=mysql_query($sql);
 $row=mysql_fetch_array($query);
 while($row=mysql_fetch_array($query)){
 $pricenum=$row['pricenum'];
 $sname=$row['sname'];
 } 
 echo $str .= "['".$sname."',".$pricenum."],";//拼接字符串,按照jqChart要求的字符串格式,当然用数组更好,可惜不怎么会

肯定还有更好的方法 只是我刚开始学,慢慢摸索

相信解决办法不止以上所述,肯定还有更好的解决办法,欢迎大家共同学习进步。

ps:ajax读取数据,使用jqchart显示图表

最近项目中需要显示出图表效果,原来收集到的图表插件终于有用武之地了。

但是和jqchart对比,还是有很多不同之处的。

实现效果:

使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法

我就对jqchart进行了重新编写。

首先要解决的是不显示x轴和y轴:

//各DIV作成 
     // 取消标题显示 
     /* 
     this.titleBox//Title 
      =this.mkBoxElement('T', 
       this.op.titleLeft,this.op.titleTop 
      ).appendTo(this.jQcanvasBox) 
      .css('width',this.op.width-this.op.titleLeft)//fix for safari3 2007.12.4 
      .get(0); 
     */ 
     // 取消y轴数字显示 
     /* 
     this.scaleYBox//Y?スケ?ル 
      =this.mkBoxElement('Y', 
       this.op.scaleYLeft,this.op.scaleYTop 
      ).appendTo(this.jQcanvasBox).get(0); 
     */ 
     // 取消x轴分类显示 
     /* 
     this.scaleXBox//X?スケ?ル 
      =this.mkBoxElement('X', 
       this.op.scaleXLeft,this.op.scaleXTop 
     ).appendTo(this.jQcanvasBox).get(0); 
     */

其次,对于拐点的文字,原来显示是相应的data值,现在需要显示的是对应的x轴名称:

if( x <= op.width){ 
       var dx=x-op.paddingL,dy=y-op.paddingT; 
       var dxx = i<=0 ? (dx+op.labelDataOffsetX - 5 + 'px'):( dx+op.labelDataOffsetX - 20 + 'px'); //坐标点x轴偏移 
       var dyy = i%2 ? (dy+op.labelDataOffsetY - 25 + 'px'):(dy+op.labelDataOffsetY - 5 + 'px'); //坐标点y轴偏移 
       it.wrtText( 
        //dx+op.labelDataOffsetX - 20 + 'px', 
        dxx, 
        //dy+op.labelDataOffsetY - 10 + 'px', 
        dyy, 
        //op.rows[i],  // pre: 坐标点data值 
        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:样式控制

使用默认的数据可以显示出来了。接下来就是和开发的协作了。

我希望可以使用ajax异步获取数据,然后在前台显示。

这里,我使用了一个示例页面chartdata.html, 即需要的数据页

[{labelX : ["外观设计","便携性","易用性","电池待机","摄像功能","变焦"],data :[[5,7,2,3,9,4]]}] 

在前台,我通过ajax请求该页面,对返回的json数据进行处理,传递给chartSetting:

$(function(){ 
 $.ajax({ 
  url: "chartdata.html", 
  type: "GET", 
  success: function(cdata){ 
   showDDChart(cdata); 
  } 
 }); 
 function showDDChart(cdata){ 
  var dd_chart = eval(cdata)[0]; 
  var chartSetting={ 
   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.data 
  };  
  $('#canvasMyID').jQchart(chartSetting); 
 } 
});

完整的html页面:

<head> 
<!--[if IE]> 
<mce:script src="excanvas-compressed.js" mce_src="excanvas-compressed.js" type="text/javascript" ></mce:script> 
<![endif]--> 
<mce:script src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" mce_src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" type="text/javascript"></mce:script> 
<mce:script src="jquery.jqchart.js" mce_src="jquery.jqchart.js" type="text/javascript" charset="utf-8"></mce:script> 
</head><body> 
<canvas id="canvasMyID" height="200"></canvas> 
<mce:script type="text/javascript"><!-- 
$(function(){ 
 $.ajax({ 
  url: "chartdata.html", 
  type: "GET", 
  success: function(cdata){ 
   showDDChart(cdata); 
  } 
 }); 
 function showDDChart(cdata){ 
  var dd_chart = eval(cdata)[0]; 
  var chartSetting={ 
   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.data 
  };  
  $('#canvasMyID').jQchart(chartSetting); 
 } 
}); 
// --></mce:script> 
</body> 
</html>

OK,大功告成! 完整示例我会放到我的资源里。

好久都没有用jquery ajax了,拼json数据都有些生疏了。还是喜欢开发这种有逻辑性的工作....

Javascript 相关文章推荐
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
心扬JS分页函数代码
Sep 10 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 #Javascript
Bootstrap每天必学之按钮
Nov 26 #Javascript
学习JavaScript设计模式(多态)
Nov 25 #Javascript
创建自己的jquery表格插件
Nov 25 #Javascript
一不小心就做错的JS闭包面试题
Nov 25 #Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 #Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 #Javascript
You might like
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
什么是会话Bean
2015/05/14 面试题
文明生主要事迹
2014/05/25 职场文书
机电系毕业生求职信
2014/07/11 职场文书
奔腾年代观后感
2015/06/09 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
《我是什么》教学反思
2016/02/16 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
用JS实现飞机大战小游戏
2021/06/09 Javascript
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL