ajax画图表源码,使用JCharts生成图表通过Ajax 基于JQuery
使用JCharts生成统计图，下载网站：http://www.oschina.net/p/jcharts 。
页面代码：
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
My JSP 'index.jsp' starting page$(function(){
$("#addButton").click(function(){
$("#toTarget").append("
"+$("#Copytarget").html()+"");});
$("#removeButton").click(function(){
$("#move").remove();
});
$("#push").click(function(){
$("#myForm").attr("action","MyServlet");
$.getJSON("MyServlet",$("#myForm").serialize(),function(data){
var myData = new Array();//pie 和bar使用的数据数组相同 [String,int]
var lineData = new Array(); //line使用的数据数组和pie和bar的不同[int,int]
//var myData = new Array(["苹果",12],["香蕉",24],["橘子",36]);
$.each(data,function(index,da){
//alert(data[index].value);
myData[index]=new Array(data[index].name,data[index].value);
lineData[index]=new Array(parseInt(data[index].name),data[index].value);
});
//alert(myData);
var myChart1 = new JSChart('chartContainer1','pie');
var myChart2 = new JSChart('chartContainer2','bar');
var myChart3 = new JSChart('chartContainer3','line');
myChart1.setDataArray(myData);
myChart1.draw();
myChart2.setDataArray(myData);
myChart2.draw();
myChart3.setDataArray(lineData);
myChart3.draw();
});
});;
});
图标标题： | |
横标题 | Value |
增加一行
删除一行
服务器端Servlet代码：
package com.ws.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
public class MyServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String theme = request.getParameter("theme");
String[] nameList = request.getParameterValues("name");
String[] valueList = request.getParameterValues("value");
String result="";
List tempList = new ArrayList();
for (int i = 0; i < valueList.length; i++) {
tempList.add(new Helper(nameList[i],Integer.parseInt(valueList[i])));
}
Gson gson = new Gson();
result = gson.toJson(tempList);
System.out.println(result);
//System.out.println(theme);
//System.out.println(nameList);
//System.out.println(valueList);
out.println(result);
out.flush();
out.close();
}
}
辅助实体类：
package com.ws.servlet;
public class Helper {
private String name;
private int value;
public Helper() {
// TODO Auto-generated constructor stub
}
public Helper(String name,int value) {
this.name = name;
this.value = value;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
}
总结：使用JCharts生成饼图和树状图可以使用同一组数据，因为数组格式都是[String,int]型
生成折线图的话，需要加特殊处理，因为数组格式是[int ,int ]类型。
上述全是我自己的想法，如果不对，敬请指正！
如果有什么疑问，请留言，也可以联系我QQ：642507902。