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

本文实例讲述了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 = 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程序设计有所帮助。

赞 (0)

相关推荐

  • AJAX 实时读取输入文本(php)

    客户端代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • javascript结合ajax读取txt文件内容

    代码很简洁,这里就不多废话了,直接上源码 html代码 复制代码 代码如下: <!doctype html>  <html>   <head>       <meta charset="utf-8"/>       </head>       <body>           <button type="button"  onclick="show()">请求数据

  • 通过Jquery的Ajax方法读取将table转换为Json

    通过Jquery的Ajax方法读取将table转换为Json

    1. 创建Users表 复制代码 代码如下: create table Users ( UserId int identity(1,1) primary key, UserName varchar(20) ) insert into Users values('Bradley') insert into Users values('Dan') 复制代码 代码如下: create table Users ( UserId int identity(1,1) primary key, UserNam

  • 用Ajax读取xml文件的简单例子

    到此就可以就发送请求读取服务器端的XML数据了,最后要做的就是处理数据了. 关于XMLHttpRequest对象,请参考About XMLHttpRequest Object一文. 看例子: //AjaxDemo.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  • java读取properties文件的方法实例分析

    本文实例讲述了java读取properties文件的方法.分享给大家供大家参考.具体分析如下: 1.不在项目中读取: Properties properties = new Properties(); BufferedReader read = new BufferedReader(new InputStreamReader(new FileInputStream("文件的路径"),"utf-8")); properties.load(read); properti

  • ajax读取properties资源文件数据的方法

    本文实例讲述了ajax读取properties资源文件数据的方法.分享给大家供大家参考.具体实现方法如下: properties资源文件的内容如下: hello=englishww name=english zk emailEmpty=Field cannot be empty! emailInvalid=Invalid email address! js调用ajax处理代码: $.ajax({ type:'POST', dataType:'json', url:'/jeecms/jeecms/

  • 用js来解决ajax读取页面乱码

    例子: rsajax.js: 复制代码 代码如下: var http_request = false; function makePOSTRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType

  • JS通过ajax动态读取xml文件内容的方法

    本文实例讲述了JS通过ajax动态读取xml文件内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码读取note.xml文件,并填充显示相关字段 HTML文件代码如下 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,

  • Ajax初试之读取数据篇

    拿出来我们上次准备好的东西．1:XMLHTTPRequest对象的函数．2:Asp输出xml格式的文件．你可以点击查看该文件内容:Asp输出xml格式的数据 打开以后你会发现我们使用Asp技术动态的输出一个xml格式的数据．如果你对该技术还不了解,请返回阅读:ajax开始准备篇 在这个输出的数据里面有一个msg标签．标签里包含了一段文字内容．今天我们就读取这个msg标签．并将文字内容显示到你的网页上． 先看下面的代码．并附上效果演示 web_ajax.asp 复制代码 代码如下: <?xml v

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

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

    本文实例讲述了ajax读取数据后使用jqchart显示图表的方法.分享给大家供大家参考.具体分析如下: 最近项目中需要显示出图表效果,原来收集到的图表插件终于有用武之地了. 但是和jqchart对比,还是有很多不同之处的. 实现效果: 我就对jqchart进行了重新编写. 首先要解决的是不显示x轴和y轴: //各DIV作成 // 取消标题显示 /* this.titleBox//Title =this.mkBoxElement('T', this.op.titleLeft,this.op.tit

  • AJAX+JSP实现读取XML内容并按排列显示输出的方法示例

    本文实例讲述了AJAX+JSP实现读取XML内容并按排列显示输出的方法.分享给大家供大家参考,具体如下: 实现功能:点击按扭,显示出JSP页面中通过out.println传过来的xml信息 一.含XML的JSP页面 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% response.setContentType("text/x

  • Ajax读取数据到表格的实现代码

    今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内．同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 ．将ajax请求的数据显示到该表格内． 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术．如果你还不知道如何使用Asp输出xml请返回:＂ajax开始准备篇＂ 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构．因为我们

  • 用C语言实现从文本文件中读取数据后进行排序的功能

    用C语言实现从文本文件中读取数据后进行排序的功能

    功能介绍 程序的功能是从外部读取一个包括int型数据的文本文件,然后将它保存到内部临时数组,对数组进行排序后,以文本形式输出到指定的文件上.因为是int类型的数据,没有很严重的损失精度的问题. 正常运行要求: 包括数据的源文件内不能包括其他任何除数字和空白字符(空格,制表符,换行符)之外的任何字符,源文件最开始必须是数字字符,要保证源文件的数据计数正确.同时保证文件名有效. 运行结果 data.txt: obj.txt: 完整代码 警告:版权所有,谨供参考! #include <stdio.h>

  • Java文件读取写入后 md5值不变的实现方法

    假如我们想把某文件读入 StringBuffer 并写入新文件,新文件md5值需要保持不变(写入新文件后保证和源文件一模一样), 我们就需要在操作 StringBuffer 时附加换行符: StringBuffer sb = new StringBuffer(); Reader rd = null; BufferedReader br = null; rd = new FileReader("E:/绮萝酶是女装的男孩子.html"); br = new BufferedReader(r

  • vue请求服务器数据后绑定不上的解决方法

    后台返回的数据,json类型 {"success":1,"tagList":[{"Id":1,"name":"林俊杰"},{"Id":2,"name":"MV"},{"Id":3,"name":"三次元"},{"Id":4,"name":"

  • Ajax读取数据之分页显示篇实现代码

    我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心,然后我们再看实例效果．所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示

  • ajax更新数据后，jquery、jq失效问题

    给元素绑定click事件 ,但是遇到一个问题 就是 当我执行一些ajax请求后 这个click事件就失效了 比如说 我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了 其实 原因很简单 ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,后加载的就没有绑定 解决方法 有两个 : 1. 在ajax请求成功之后重新绑定 2. 用live方法 复制代码 代码如下:

  • Flex中在Tree绑定数据后自动展开树节点的方法

    Flex中在Tree绑定数据后自动展开树节点的方法

    用Flex/Flash做开发的同志们应该会使用 expandChildrenOf(item,true)方法来使用Tree组件在绑定数据后自动展开所有树型节点(不需要用户再自己点击展开节点,会方 便许多),而在Flex开发帮忙文档中很明确写道: "If you set dataProvider and then immediately call expandChildrenOf() you may not see the correct behavior. You should either wa

  • ajax添加数据后如何在网页显示

    ajax添加数据后如何在网页显示

    下面通过图文并茂的方式展示给大家,具体内容如下所述: 今天下午做一个项目小练习.需要把查询日志的内容显示到网页上来.一开始陷入了一个误区. 一直以来我这个小项目需要访问ashx来生成html的代码.后台用的Razor模板引擎. 刚开始显示用户列表时.因为是显示到了另一个界面(其实就是另一个网页).razor直接输出没什么问题 但是下面这个需要显示到当前页面的下面 当我ajax提交后.razor模板引擎拼接后的代码.确是返回到了ajax中的data中 不能像最上面那张图那样显示了.我的想法破灭了.

随机推荐