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

更新时间：2015年06月10日 11:12:07 作者：spring21st

这篇文章主要介绍了ajax读取数据后使用jqchart显示图表的方法,涉及Ajax操作及图表插件的相关使用技巧,需要的朋友可以参考下

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

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

但是和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访问XML数据的实例
使用javascript访问XML数据的实例...
2006-12-12
js Canvas实现圆形时钟教程
这篇文章主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
big.js 如何解决精度丢失问题源码解析
这篇文章主要为大家介绍了big.js 如何解决精度丢失问题源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
javascript继承机制实例详解
这篇文章主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
2014-11-11
promise和co搭配生成器函数方式解决js代码异步流程的比较
这篇文章主要介绍了promise和co搭配生成器函数方式解决js代码异步流程的比较，在es6中引入的原生Promise为js的异步回调问题带来了一个新的解决方式co模块搭配Generator函数的同步写法，更是将js的异步回调带了更优雅的写法。感兴趣的小伙伴们可以参考一下
2018-05-05
Grid得到选择行数据的方法总结
Grid得到选择行数据的方法总结，需要的朋友可以参考下。
2011-01-01
BootStrap入门教程(二)之固定的内置样式
这篇文章主要介绍了BootStrap入门教程(二)之固定的内置样式的相关资料，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
利用uni-app生成微信小程序的踩坑记录
uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台,这篇文章主要给大家介绍了关于利用uni-app生成微信小程序的踩坑记录,需要的朋友可以参考下
2022-04-04
TypeScript的安装、使用、自动编译的实现
TypeScript是一种由微软开发的开源、跨平台的编程语言。这篇文章主要介绍了TypeScript的安装、使用、自动编译的实现方法,需要的朋友可以参考下
2020-04-04
浅析ES6与CommonJS中模块的用法对比
ES6 的模块化汲取了 CommonJS 和AMD 的优点,拥有简洁的语法和异步的支持,并且写法也和 CommonJS 非常的相似,下面我们就来看看二者用法的差异吧
2023-09-09