jChart图形制作

tdjava

浏览: 21893 次
性别:
来自: 厦门

最近访客更多访客>>

qj624904774

ybbwxz

zhangdw

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

json Servlet IE Ajax JSP

account.js
/**********************************************************************/

var accountData1 = new Array(); // 广发证券
var accountData2 = new Array(); // 深圳发展
var accountData3 = new Array(); // 东放航空
/**
* 实时交易监控
*/
function getAccount(){
    $.ajax({
        type: "post",
        url: "account",
        data: "random" + new Date(),
dataType : "json",
        success: function(rs){
         for(var i=0; i<rs.length; i++){
            accountData1[i] = rs[i];
            accountData2[i] = rs[i]*i*2;
            accountData3[i] = rs[i]*i*4;
         }
         $("#di").html("广发证券："+accountData1+"<br>深圳发展："+accountData2+"<br>东放航空："+accountData3);
   var chartSetting = {
             config : {
     type : "line", //line线图 bar柱形
     title : "<span style='color:red'>━━━</span>广发证券<br/><span style='color:blue'>━━━</span>深圳发展<br/><span style='color:black'>━━━</span>东放航空<br/>",
     titleLeft: 100,
     labelX : ["9:00","12:00","14:00","16:00","18:00"],
     scaleY : {min: 0,max:500,gap:50},
     width : 1000, //有影响
     height: 500, //有影响
     paddingL : 100, //有影响
     paddingT : 100, //有影响
     //labelYunit : "<b>哈哈</b>",
     //color :'green',//设置线条颜色
     colorSet : ['red','blue','black'],//设置线条颜色
     //bgGradient : false//是否启用背景颜色默认flase
     bgGradient :{
      direction : 'vertical', //vertical 垂直   horizontal 水平
      from      : '#FFFFFF',
      to        : '#444444'
     }
    },
    data : [
          accountData1,
          accountData2,
          accountData3
    ]
         };
   $('#accountID').jQchart(chartSetting);
        }
    });
}

account.jsp
/***********************************************************************/

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
    <title>实时交易监控</title>
    <script type="text/javascript" src="js/jquery.js"></script>
<script src="js/ui/ui.mouse.js"></script>
<script src="js/ui/ui.draggable.js"></script>
<script src="js/ui/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/jquery.jqchart-0.03-beta-1.2-skip-labelLines.js" charset="utf-8"></script>

<script type="text/javascript" src="js/account.js"></script>
<script type="text/javascript">
window.setInterval(getAccount,3000);
</script>
</head>
<body>
     <canvas id="accountID">
     </canvas>
     <div id="di"></div>
</body>
</html>

AccountServlert.java
package com.tand;

import java.io.IOException;
import java.util.Random;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import com.util.DateAndNumberUtil;

@SuppressWarnings("serial")
public class AccountServlet extends HttpServlet{

public void doGet(HttpServletRequest request,HttpServletResponse response){
doPost(request,response);
}

public void doPost(HttpServletRequest request,HttpServletResponse response){
Random random = new Random();
JSONArray jsonArray = new JSONArray();
for(int i=1; i<6; i++){
   String data = DateAndNumberUtil.getPointTwoNumber(random.nextDouble() * i*100 + random.nextDouble(),"#.00");
   jsonArray.add(data);
}
System.out.println(jsonArray.toString());
try {
   response.getOutputStream().println(jsonArray.toString());
} catch (IOException e) {
   e.printStackTrace();
}
}
}

分享到：