ajax读取数据,使用jqchart显示图表
2010-12-17 13:56
555 查看
最近项目中需要显示出图表效果,原来收集到的图表插件终于有用武之地了。
但是和jqchart对比,还是有很多不同之处的。
实现效果:
![](http://hi.csdn.net/attachment/201012/17/0_12925647717H6T.gif)
我就对jqchart进行了重新编写。
首先要解决的是不显示x轴和y轴:
其次,对于拐点的文字,原来显示是相应的data值,现在需要显示的是对应的x轴名称:
使用默认的数据可以显示出来了。接下来就是和开发的协作了。
我希望可以使用ajax异步获取数据,然后在前台显示。
这里,我使用了一个示例页面chartdata.html, 即需要的数据页
在前台,我通过ajax请求该页面,对返回的json数据进行处理,传递给chartSetting:
完整的html页面:
OK,大功告成! 完整示例我会放到我的资源里。
好久都没有用jquery ajax了,拼json数据都有些生疏了。还是喜欢开发这种有逻辑性的工作....
PS:昨天开部门1:1面谈的时候,我也提出了自己的想法,我希望可以通过自己的努力,将当当的前端完善起来,而不仅仅只是切图。
但是和jqchart对比,还是有很多不同之处的。
实现效果:
![](http://hi.csdn.net/attachment/201012/17/0_12925647717H6T.gif)
我就对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 ajax了,拼json数据都有些生疏了。还是喜欢开发这种有逻辑性的工作....
PS:昨天开部门1:1面谈的时候,我也提出了自己的想法,我希望可以通过自己的努力,将当当的前端完善起来,而不仅仅只是切图。
相关文章推荐
- ajax读取数据后使用jqchart显示图表的方法
- ajax读取数据后使用jqchart显示图表的方法
- 2 C#串口或TCP远程采集数据 chart图表使用示例 保存数据到access数据库和每日.txt文件并实时显示各参数曲线
- C#串口采集短信GSM chart图表使用示例 保存数据到access数据库和每日.txt文件并实时显示各参数曲线
- 使用TDBChart显示InterBase数据库的一行数据
- jQuery 图表插件 jqChart 使用
- VC6.0中使用Stream Object读取数据中流文件并显示Bmp,JPG等图片
- 在 Web 页面中使用图表(chart)表现数据
- jquery中使用ajax接收数据并且显示
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载(二)
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
- jQuery 图表插件 jqChart 使用
- jQuery 图表插件 jqChart 使用绘制雷达图
- 使用C#语言,从Excel2007中读取数据,并显示到Form中的DataGridView。
- 小白使用react---ajax请求后的数据在另一个页面显示
- 复制文件时,如何显示进度条(使用BlockRead函数读取数据,并插入application.ProcessMessages)
- 关于使用jq的ajax通过josnp方式跨域获取数据
- Android 使用RxJava+Retrofit +Realm 组合加载数据 <读取缓存 显示 请求网络数据 缓存最新数据 更新界面>(二)
- 根据ajax发送数据,从servelt中读取xml数据并显示,实现查询、删除和分页
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图