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

2019-11-20 12:18:57

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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中的getTimezoneOffset()方法使用详解

下一篇：jquery获取当前元素索引值用法实例