ajax读取数据后使用jqchart显示图表的方法


Posted in Javascript onJune 10, 2015

本文实例讲述了ajax读取数据后使用jqchart显示图表的方法。分享给大家供大家参考。具体分析如下:

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

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

实现效果:

ajax读取数据后使用jqchart显示图表的方法

我就对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程序设计有所帮助。

Javascript 相关文章推荐
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
gulp构建小程序的方法步骤
May 31 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
element跨分页操作选择详解
Jun 29 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
jquery获取当前元素索引值用法实例
Jun 10 #Javascript
jQuery实现checkbox全选的方法
Jun 10 #Javascript
JavaScript中的getTime()方法使用详解
Jun 10 #Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 #Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 #Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 #Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 #Javascript
You might like
php利用反射实现插件机制的方法
2015/03/14 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Python入门篇之编程习惯与特点
2014/10/17 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python实现自动发送邮件
2018/06/20 Python
python实现FTP循环上传文件
2020/03/20 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
资深地理教师自我评价
2013/09/21 职场文书
承认错误的检讨书
2014/01/30 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
局火灾防控工作方案
2014/05/25 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
建国大业电影观后感
2015/06/01 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL