当前位置:Gxlcms > JavaScript > ajax读取数据后使用jqchart显示图表的方法_javascript技巧

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

时间:2021-07-01 10:21:17 帮助过:5人阅读

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

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

但是和jqchart对比,还是有很多不同之处的。

实现效果:

我就对jqchart进行了重新编写。

首先要解决的是不显示x轴和y轴:

其次,对于拐点的文字,原来显示是相应的data值,现在需要显示的是对应的x轴名称:

使用默认的数据可以显示出来了。接下来就是和开发的协作了。

我希望可以使用ajax异步获取数据,然后在前台显示。

这里,我使用了一个示例页面chartdata.html, 即需要的数据页

[{labelX : ["外观设计","便携性","易用性","电池待机","摄像功能","变焦"],data :[[5,7,2,3,9,4]]}]

在前台,我通过ajax请求该页面,对返回的json数据进行处理,传递给chartSetting:

完整的html页面:

OK,大功告成!

希望本文所述对大家的jQuery程序设计有所帮助。

人气教程排行