这里有新鲜出炉的精品教程,程序狗速度看过来!
AJAX 即 "Asynchronous Javascript + XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
这篇文章主要介绍了 ajax 读取数据后使用 jqchart 显示图表的方法, 涉及 Ajax 操作及图表插件的相关使用技巧, 需要的朋友可以参考下
本文实例讲述了 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=e val(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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0714/270967.html