时间:2021-05-26
本文实例讲述了ajax读取数据后使用jqchart显示图表的方法。分享给大家供大家参考。具体分析如下:
最近项目中需要显示出图表效果,原来收集到的图表插件终于有用武之地了。
但是和jqchart对比,还是有很多不同之处的。
实现效果:
我就对jqchart进行了重新编写。
首先要解决的是不显示x轴和y轴:
//各DIV作成 // 取消标题显示 // 取消y轴数字显示 // 取消x轴分类显示其次,对于拐点的文字,原来显示是相应的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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Ajax基础ajax:无刷新数据读取,读取服务器上的信息HTTP请求方法:GET:用于获取数据,如浏览帖子ajax.judgeXmlHttpRequest('g
jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过
用户在创建图表工作表后,若要再添加一些数据,同时在图表工作表中显示出来,该怎么在图表中显示数据呢?下面我们就来看看详细的教程。软件名称:MicrosoftOff
本文实例讲述了JS通过ajax动态读取xml文件内容的方法。分享给大家供大家参考。具体分析如下:下面的JS代码读取note.xml文件,并填充显示相关字段HTM
功能:读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不