Struts2+json+hignchart(简单柱状图实现--适合jquery小白)
做了一个简单的基于Struts2 + Json + HighChart的小例子，费了一下午+晚上的时间，虽然简单，但对于我这种Jquery+Ajax小白的人还是很值得记录的。
哈哈哈
# 0. 关键点找到highchart的模板网站
https://www.hcharts.cn/docs/basic-tooltip
# 1. 关键点，在struts.xml中配置返回类型为json
<action name="queryItemsJson" class="com.bestplan.action.JsonAction" method="jsonTest">
<result type="json">
<param name="root">dataMap</param>
</result>
# 2. 关键点2
public class JsonAction {
private Map<String, Object> dataMap;
public String jsonTest(){
dataMap = new HashMap<String,Object>();
dataMap.clear();
List<List<Float>> aveTimeForCpsWay = new ArrayList<List<Float>>();
for(int x=0;x<4;x++){
List<Float> temp = new ArrayList<Float>();
for(int i=0;i<12;i++){
temp.add((new Random().nextFloat())*100); // 随机产生12个float数
}
aveTimeForCpsWay.add(temp);
}
List<String> name = new ArrayList<String>();
name.add("Tokyo");
name.add("New York");
name.add("London");
name.add("Berlin");
dataMap.put("dataArr", aveTimeForCpsWay);
dataMap.put("nameArr", name);
return "success";
}
public Map<String, Object> getDataMap() {
return dataMap;
}
public void setDataMap(Map<String, Object> dataMap) {
this.dataMap = dataMap;
}
}
# 3. 关键点
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery.1.9.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
function requestJson(){
alert("nihao");
$.ajax({
type:'GET',
url:'queryItemsJson.action',
contentType:'application/json;charset=utf-8',
//数据格式是json串
dataType:"html", //接受响应的数据类型
success:function(data){//返回json结果
alert(data);
var d = eval("("+data+")");
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: d.nameArr[],
data: d.dataArr[]
}, {
name: d.nameArr[1],
data: d.dataArr[1]
}, {
name: d.nameArr[2],
data: d.dataArr[2]
}, {
name: d.nameArr[3],
data: d.dataArr[3]
}]
}); }
}
);
}
</script>
</head>
<body>
<input type="button" onclick="requestJson()" value="请求是json，输出是json"><div id="mydiv"></div>
<div id="container" style="min-width:400px;height:400px"></div>
</body>
</body>
</html>
效果图
Struts2+json+hignchart(简单柱状图实现--适合jquery小白)的更多相关文章
- java学习笔记(12) —— Struts2 通过 xml /json 实现简单的业务处理
XML 1.引入dom4j-2.0.0.jar 2.引入jquery-1.8.2.js 3.新建common.js getInfo = function(){ $.post("getXmlA ...
- Flex+Struts2+JSON实现Flex和后台的HTTP Service请求
http://www.fengfly.com/plus/view-191093-1.html Flex+Struts2+JSON的后台代码我在这就不多说了.不懂得请看我写的上一篇文章<Strut ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- ZOOM - 简单易用的 jQuery 照片相册插件
jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...
- struts2 java.lang.StackOverflowError org.apache.struts2.json.JSONWriter
1. 问题描述: 页面通过异步访问action, action的方法通过map封装数据,struts的result的type设置为json,后台报错 六月 25, 2016 6:54:33 下午 ...
- Class org.apache.struts2.json.JSONWriter can not access a member of class org.springframework.aop.TruePointcut with modifiers "public"
Spring注入Action使用Json错误:org.apache.struts2.json.JSONException: org.apache.struts2.json.JSONException: ...
- org.apache.struts2.json.JSONWriter can not access a member of class
偶遇一个问题:org.apache.struts2.json.JSONWriter can not access a member of class org.apache.tomcat.dbcp.db ...
- Jqgrid入门-结合Struts2+json实现数据展示(五)
DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可. 初步分析:表格要实现分页,那么 ...
- Class org.apache.struts2.json.JSONWriter can not access a member of
异常形式: Class org.apache.struts2.json.JSONWriter can not access a member of * 或是 Class com.googlecode. ...
随机推荐
- 【Maven】在pom.xml文件中使用resources插件的小作用
在spring boot创建web项目打包为jar包的过程中,是不会把webapp目录下的页面也打包进去的,这个时候接触到了maven的 resources插件. ================== ...
- Android Studio: Could not download junit.jar (junit:junit:4.12)
下载了Android Studio 3.1.4,新建一个项目,选择Activity,结果gradle提示 Unable to resolve dependency for ':app@debugAnd ...
- Eclipse实用插件
Eclipse实用插件 安装:Help - Eclipse Marketplace 查看图片:QuickImage 主题:Darkest Dark 代码风格:https://blog.csdn.net ...
- 手把手教你测微信小程序
WeTest 导读 在小程序持续大量爆发的形势下,现在已经成为了各平台竞争的战略布局重点.至今年2月,月活超500万的微信小程序已经达到237个,其中个人开发占比高达2成.因小程序的开发门槛低.传播快 ...
- [Selenium]如何通过Selenium实现Ctrl+click，即按住Ctrl的同时进行单击操作
[以下是不负责任的转载……] 在自动化测试的过程中,经常会出现这样的场景: 按住Ctrl的同时,进行单击操作,已达到多选的目的 Actions a = new Actions(driver); a.k ...
- 学习java常见dos命令
在java基础学习阶段时一般会在dos命令行下操作文件,这里列出一些常用命令. 打开DOS控制台的方式 按win+r 再输入 cmd 然后回车. 常用DOS命令 d: 回车 盘符切换 (盘符加冒号) ...
- gitlab 配置 ssh key
打开本地git bash,使用如下命令生成ssh公钥和私钥对 ssh-keygen -t rsa -C 'xxx@xxx.com' 然后一路回车(-C 参数是你的邮箱地址) 然后打开~/.ssh/id ...
- Keycloak服务器安装和配置
安装地址:https://www.keycloak.org/archive/downloads-4.4.0.html 参考文档:https://www.keycloak.org/docs/latest ...
- Java中&、|、&&、||详解
1.Java中&叫做按位与,&&叫做短路与,它们的区别是: & 既是位运算符又是逻辑运算符,&的两侧可以是int,也可以是boolean表达式,当&两侧 ...
- 必应词典手机版(IOS版)与有道词典(IOS版)之问卷分析
我们制定了一个调查问卷: 1.年龄分布: 2.地域分布: 3.是否用过必应词典? 对于必应词典还是没用过的人数更多. 4.是否用过有道词典? 有道词典的使用率更高一点. 5.对于必应的基本功能给几分? ...