当我们想从服务器获取数据，并根据所得数据在网页上制成图时，大多数情况下要求服务器传递给页面的是一组数据，而非单个数据，我们需要将一个List转化为JSON字符串从服务器端传递至客户端。JSON字符串的语法格式为:[{key1:value1,key2:value2, ... ...},{},{}... ...]
而在客户端，在使用jsChart根据数据生成图片时，所需数据格式为:(['Jan', 2], ['Feb', 1], ... ...)。
很明显如果直接将JSON字符串evalJSON后直接myChart.setDataArray()的话肯定无效。这就需要我们将JSON字符串转换为目标格式。思路是:将jsChart复制所需的数组设计成二维数组, 用二维数组的每一项代表一个数据对象。 参考代码如下:
实体类entity.People
package entity;
public class People {
private String name;
private double salary;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
}
用于处理请求的Servlet:Test(访问url为test)
package test;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import util.JSONUtils;
import entity.People;
public class Test extends HttpServlet {
public void service(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
List<People> list=new ArrayList<People>();
for(int i=0;i<10;i++){
People people=new People();
people.setName("A"+i);
people.setSalary(new Random().nextDouble());
list.add(people);
}
out.println(JSONUtils.listToString(list));
out.flush();
out.close();
}
}
JSON工具类:
package util;
import java.util.List;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class JSONUtils {
public static String listToString(List list){
JSONArray json=JSONArray.fromObject(list);
String str=json.toString();
return str;
}
public static String objectArrayToString(Object[] obj){
JSONArray json=JSONArray.fromObject(obj);
return json.toString();
}
public static String objectToString(Object obj){
JSONObject json=JSONObject.fromObject(obj);
return json.toString();
}
}
web.xml配置文件
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>Test</servlet-name>
<servlet-class>test.Test</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Test</servlet-name>
<url-pattern>/test</url-pattern>
</servlet-mapping>
JSP文件
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="js/prototype1.6.js"></script>
<script type="text/javascript" src="js/jscharts.js"></script>
</head>
<body>
<a href="index.jsp">返回</a>
<br />
<div id="div">加载...</div>
<script type="text/javascript">
function getXmlHttpRequest(){
var xmlHttpRequest = null;
if ((typeof XMLHttpRequest) != 'undefined'){
xmlHttpRequest = new XMLHttpRequest();
}else {
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
return xmlHttpRequest;
}
function getData(){
xmlReq=getXmlHttpRequest();
var url="test";
xmlReq.open("GET",encodeURI(url),true);
xmlReq.onreadystatechange=function(){
if(xmlReq.readyState == 4){
/*注意JSON字符串[{key:value,key1:value1...},{},{}...]
*转换为JS对象，进而
*转化为符合jsChart条件([key,value],[key1,value1]...)
*的数组的过程
*/
var resText = xmlReq.responseText;
var temp=resText.evalJSON();
var array=new Array();
for(var i=0;i<temp.length;i++){
var arr=new Array();
arr[0]=temp[i].name;
arr[1]=temp[i].salary;
array[i]=arr;
}
var myChart = new JSChart('div', 'line');
myChart.setDataArray(array);
myChart.draw();
}
}
xmlReq.send(null);
}
window.onload=getData;
</script>
</body>
</html>
相关推荐
6. **示例与文档**："包含使用Example"说明压缩包内提供了示例代码，这有助于快速了解如何使用JsChart 3 创建和配置图表。示例代码通常会涵盖基本用法和复杂功能，对于初学者来说非常有价值。同时，建议参考官方文档...
1. **数据源支持多种格式**：除了JavaScript数组，JsChart还支持使用JSON和XML格式的数据作为数据源，通过`setDataJSON`和`setDataXML`方法来分别使用JSON或XML格式数据。 2. **图表类型的多样性**：JsChart支持...
2. **准备数据**：将要展示的数据整理成JSON格式或其他适合JSChart解析的格式。 3. **创建容器**：在HTML中创建一个用于放置图表的div元素，设置其ID以便于JavaScript代码操作。 4. **初始化图表**：通过...
4. **前端渲染**：在JSP页面中解析JSON数据，并使用JsChart的API将数据渲染到页面中，形成图表。 ### 完成和总结 作者提到，这个网上商城项目即将完成，除了本节所讲的销售报表外，还计划抽取DAO层，完善整个项目...
本文将探讨如何利用JavaScript库JSChart与Java后端DWR（Direct Web Remoting）技术来快速生成图表，以实现前后端的有效交互。 首先，DWR是一种在浏览器和Java服务器之间进行异步通信的技术，它允许我们在不使用...
然而，原版的JSCharts在处理中文字符时可能存在兼容性问题，导致中文显示不正常或者乱码。在提供的"js charts含中文demo"中，我们可能找到了解决这一问题的方案。 首先，我们需要了解JSCharts的基本用法。JSCharts...
- **方法一（JSON数据）**：例如，可以定义一个名为`myData`的数组，然后创建一个新的JSChart对象，设置数据并绘制图表，如下所示： ```javascript var myData = new Array([10, 20], [15, 10], [20, 30], [25, ...
它支持多种数据输入格式（如XML、JSON或JavaScript数组），使得用户可以轻松地将数据转换为图表。此库允许开发者绘制各种类型的图表，包括条形图、饼图和线图等，并且高度可定制。 #### 二、实现步骤 ##### 1. ...
2. **准备数据**：将要展示的数据以JSON或其他格式组织好，可以是静态数据，也可以是从服务器获取的动态数据。 3. **创建图表容器**：在HTML中创建一个`div`元素作为图表的容器，并设置相应的ID。 4. **初始化图表...
其次，jsCharts是一款基于JavaScript的图表绘制工具，它可以无缝地与jQuery整合。jsCharts提供了一种简单的方式来创建动态、交互式的图表，包括柱形图、线形图等多种图表类型。这个插件的核心优点在于它允许开发者...
JS Charts可以很好地与jQuery、AngularJS、React等前端框架配合使用，增强应用程序的功能和用户体验。 7. **学习与进阶** - 通过阅读JSCharts.pdf，可以深入理解库的内部机制和最佳实践。 - 分析examples中的...