jChart图形制作

最新推荐文章于 2024-07-12 16:42:46 发布

tdjava8888

最新推荐文章于 2024-07-12 16:42:46 发布

阅读量203

点赞数

分类专栏： JQuery 文章标签： json Servlet IE Ajax JSP

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[size=large]account.js[/size]
/**********************************************************************/

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);
}
});
}

[size=large]account.jsp[/size]
/***********************************************************************/

<%@ 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>

[size=large]
AccountServlert.java[/size]
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();
}
}
}

tdjava8888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jChart图形制作

[size=large]account.js[/size]/**********************************************************************/var accountData1 = new Array(); // 广发证券var accountData2 = new Array(); // 深圳发展var account...
复制链接

扫一扫