做了一个简单的基于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小白)的更多相关文章

  1. 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 ...

  2. Flex+Struts2+JSON实现Flex和后台的HTTP Service请求

    http://www.fengfly.com/plus/view-191093-1.html Flex+Struts2+JSON的后台代码我在这就不多说了.不懂得请看我写的上一篇文章<Strut ...

  3. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  4. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  5. struts2 java.lang.StackOverflowError org.apache.struts2.json.JSONWriter

    1. 问题描述: 页面通过异步访问action,    action的方法通过map封装数据,struts的result的type设置为json,后台报错 六月 25, 2016 6:54:33 下午 ...

  6. 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: ...

  7. 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 ...

  8. Jqgrid入门-结合Struts2+json实现数据展示(五)

    DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可.         初步分析:表格要实现分页,那么 ...

  9. 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. ...

随机推荐

  1. 关于js中直接获取后台的值，直接弹窗获取到的值

    js里获取后台的值,以前我都是后台通过jsp中的<input>EL表达式: 后台代码把传向页面的值放入request:request.setAttribute("Success& ...

  2. bzoj 3232: 圈地游戏

    bzoj 3232: 圈地游戏 01分数规划,就是你要最大化\(\frac{\sum A}{\sum B}\),就二分这个值,\(\frac{\sum A}{\sum B} \geq mid\) \( ...

  3. ant property file刷新不及时

    一.问题 ant脚本定义file的property,有时往里面写了新的值,去访问时还是旧的值 二.原因分析 应该是已定义的file property,后续更新其值的时候,ant的内存缓存没有及时更新, ...

  4. 一款好看的Sublime Text浅色主题：Ayu大作

    上一篇分享的VS Code的文中,界面也是浅色主题,也是Ayu作品.下面看一下Sublime Text中的Ayu浅色主题 不错吧. 如何下载? 首选项——插件控制——安装插件或者ctrl+shift+ ...

  5. 如何在ajax请求中设置特殊的RequestHeader

    现在ajax应用已经相当广泛了,有很多不错的ajax框架可供使用.ajax是一个异步请求,也主要是一种客户端的脚本行为.那么,如何在请求之前为请求添加特殊的一些头部信息呢? 下面是一个简单的例子,我用 ...

  6. linux下的静态库与动态库

    目录 静态库 定义: 生成及使用方法: 静态库的优缺点 动态库 定义: 生成及使用方法: 动态库优缺点: 静态库 先说说我们为什么需要库? 当有些代码我们大量会在程序中使用比如(scanf,print ...

  7. 曲线救国：安装golang.org/x/*

    很多第三方库都用到了golang.org/x下面的包,但是国内不通过VPN是无法访问到的,不过没关系,在github.com/golang下面,基本都有对应的包 如何操作? 以安装sys包为例 git ...

  8. 如何获取c:forEach里面点击时候的值

    1.c:forEach遍历输出 <c:forEach items="${data}" var="item" > <a onclick=&quo ...

  9. 关于java调用Dll文件的异常 %1 不是有效的 Win32 应用程序。

    这个问题 将java的和编辑器都换成32位

  10. 3星|《规避政治风险：全球化企业必修课》：中国将赢得5G竞争

    规避政治风险:全球化企业必修课(<哈佛商业评论>增刊) <哈佛商业评论>的两篇文章+<财经>的1篇文章.把<财经>的文章放到增刊中,好像是第一次,我觉得 ...