ajax读取数据,使用jqchart显示图表

最新推荐文章于 2021-07-02 16:20:41 发布

spring21st

最新推荐文章于 2021-07-02 16:20:41 发布

阅读量4.3k

点赞数

分类专栏： jQuery 文章标签： ajax function safari json jquery url

本文链接：https://blog.csdn.net/spring21st/article/details/6082085

版权

jQuery 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

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

但是和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页面：

OK，大功告成！完整示例我会放到我的资源里。

好久都没有用jquery ajax了，拼json数据都有些生疏了。还是喜欢开发这种有逻辑性的工作....

PS：昨天开部门1:1面谈的时候，我也提出了自己的想法，我希望可以通过自己的努力，将当当的前端完善起来，而不仅仅只是切图。