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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
javascript内存管理详细解析
Nov 11 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
JQuery性能优化的几点建议
May 14 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
p5.js实现动态图形临摹
Oct 23 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发电子邮件
2006/10/09 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python 转义字符详细介绍
2017/03/21 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
kali中python版本的切换方法
2019/07/11 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
高中语文教学反思
2014/01/16 职场文书
秋季运动会活动方案
2014/02/05 职场文书
工作迟到检讨书
2014/02/21 职场文书
企业文明单位申报材料
2014/05/16 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫