FusionCharts实例，改变之网络

最新推荐文章于 2019-07-11 13:30:48 发布

猥琐的小甲鱼

最新推荐文章于 2019-07-11 13:30:48 发布

阅读量544

点赞数

分类专栏： java FusionChart

本文链接：https://blog.csdn.net/u012902158/article/details/18995091

版权

java FusionChart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、servlet配置

<servlet>
<servlet-name>ChartDataAct</servlet-name>
<servlet-class>com.love.action.ChartDataAct</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ChartDataAct</servlet-name>
<url-pattern>/ChartDataAct</url-pattern>
</servlet-mapping>

2、java代码

package com.love.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 ChartDataAct extends HttpServlet {

/**
* serialVersionUID:TODO（用一句话描述这个变量表示什么）
*
* @since 1.0.0
*/

private static final long serialVersionUID = 6627846392109536031L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter pw = response.getWriter();

//模拟连接数据库读取数据
List<Map<String, Object>> list= new ArrayList<Map<String, Object>>();
Map<String, Object> map = null;
for (int i = 0; i < 15; i++) {
map = new HashMap<String, Object>();
map.put("LABEL", (2000+i)+"年");
map.put("A", 10+(i*2)-2);
map.put("B", 15+(i*3)-5);
list.add(map);
}

//将数据用json串的格式发送到页面
pw.println(new Gson().toJson(list));
pw.flush();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request, response);

}

}

3、页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
request.setAttribute("path",basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>FusionChart图表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="${path }/page/js/jquery.min.js"></script>
<script type="text/javascript" src="${path }/page/js/FusionCharts.js"></script>
<style type="text/css">
body{
width: 1920px;
height: 2160px;
margin:0px;
font-family: Arial;
background-color: #2682b1;
}
</style>
</head>
<body>
<button οnclick="test('${path }/page/swf/MSLine.swf')">折线图</button><br>
<button οnclick="test('${path }/page/swf/MSBar2D.swf')">横向直方图</button><br>
<button οnclick="test('${path }/page/swf/MSColumn2D.swf')">柱状图</button><br>
<button οnclick="test('${path }/page/swf/MSArea.swf')">面积图</button><br>
<button οnclick="test('${path }/page/swf/MSCombi2D.swf')">2D饼状图</button><br>
<button οnclick="test('${path }/page/swf/MSCombi3D.swf')">2D饼状图</button><br>

<div id="chart"></div>

<script type="text/javascript">

//此处配置用于chart分风格,如标题,颜色,字体等),详细配置请查看chart API.
var chartHead = "<chart bgAlpha='0,0' animation='1' plotFillRatio='100' showPlotBorder='0' ";
chartHead += " formatNumberScale='0' ";
chartHead += " baseFontSize='20' baseFontColor='ffffff' showValues='0' showBorder='0' useRoundEdges='0' ";
chartHead += " canvasBgAlpha='100' canvasBgcolor='2682b1' ";
chartHead += " canvasBorderColor='f1f1f1' canvasBorderThickness='3' canvasBorderAlpha='100' ";
chartHead += " showAlternateHGridColor='1' hoverCapBgcolor='2682b1' alternateHGridColor='52a1c8' alternateHGridAlpha='100'";
chartHead += " divLineThickness='1' divLineAlpha='0' divLineColor='ffffff' numdivlines='6'";
chartHead += " anchorRadius='5' anchorBorderThickness='3' lineThickness='5'";
chartHead += " legendBorderAlpha='100' legendBorderColor='ffffff' legendBgAlpha='0' legendShadow='1'>";

function test(chartName){
var categorie = "<categories>";
var datasetA = "<dataset seriesName='第一条线' color='fb9147' >";
var datasetB = "<dataset seriesName='第二条线' color='7BFC00' >";

// swf文件路径图表id:随便起, 宽高
var chart01 = new FusionCharts(chartName, "chartId01", 1270, 550,"0", "0");
//使用ajax请求获取所需数据
$.ajax({
url:"${path }/ChartDataAct",
async:true,
type:"POST",
success:function(returnedData){
var list=eval(returnedData);
for ( var i = 0; i < list.length; i++) {
categorie+="<category label='"+list[i].LABEL+"'/>";
datasetA +="<set value='"+list[i].A+"'/>";
datasetB +="<set value='"+list[i].B+"'/>";
}

categorie += "</categories>";
datasetA +="</dataset>";
datasetB +="</dataset>";

chart01.setTransparent(true);//chart背景透明
//为chart写入数据
chart01.setXMLData( chartHead + categorie + datasetA + datasetB + "</chart>");
chart01.render("chart");//将chart写入到id为chart的div中
}
});
}
</script>

</body>
</html>

3、导入资源

4、struts2json支持

</package>

5、action实例

/**
*
* @方法说明: 异步获取街道信息列表
* @参数: @throws IOException
* @return void
* @throws
*/
public void ajaxQueryChinaStreets() throws IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
// 获取当前查询字段
String searchByName = request.getParameter("searchByName");
if (searchByName != null && !(searchByName.isEmpty())) {
searchByName = Escape.unescape(searchByName);
}
// 获取当前页码
String currentPage = request.getParameter("page");
// 初始化page
if (currentPage == null || currentPage.equals("")) {
currentPage = "1";
}
int intPage = Integer.parseInt(currentPage);
Long totalCount = null;
// 获取当前数据库中的省份的记录总数
totalCount = chinaStreetsService.queryChinaStreetsCount(searchByName);
// 初始化页码对象
int number = 10;
if(request.getParameter("rows")!=null){
number=Integer.parseInt(request.getParameter("rows"));
}

// 当前页开始记录
int start = (intPage - 1) * number;
// 获取街道数据
List<PChinaStreets> chinaStreetsList = new ArrayList<PChinaStreets>();
chinaStreetsList = chinaStreetsService.queryChinaStreetsList(
searchByName, start, number);
out.print(TransformToJOSN.returnEndJson(totalCount, chinaStreetsList));
} catch (Exception e) {
out.write(TransformToJOSN.returnMessageJson("result", "数据库操作异常，查询信息失败!"));
e.printStackTrace();
}
}