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

增加一行

删除一行

This is my Chart Container!

This is my Chart Container!

This is my Chart Container!

服务器端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。