做了一个简单的基于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. 3495: PA2010 Riddle

    3495: PA2010 Riddle 链接 分析: 每个点要么建首都,要么不建,并且一个点建了,会导致一些点不能建.所以可以考虑2-sat. 但是如果在每个郡里两两连边,边数是n^2的. 考虑用前缀 ...

  2. Codeforces 914 C. Travelling Salesman and Special Numbers (数位DP)

    题目链接:Travelling Salesman and Special Numbers 题意: 给出一个二进制数n,每次操作可以将这个数变为其二进制数位上所有1的和(3->2 ; 7-> ...

  3. Codeforces Round #511 Div.1 A Div.2 C

    嗯切一题走人很开心. gzy-50分比我还惨. 题意:有n个数,去掉尽量少的数使得剩下数的gcd变大. 首先把这n个数都除以gcd,就变成了去掉尽量少的数使得gcd不等于1. 可以枚举一个质数,然后统 ...

  4. jquery validate 使用示例

    var el = { $jsFrom: $('.js-form'), }; // 检测用户名是否存在 jQuery.validator.addMethod("isexist", f ...

  5. MYSQL之视图、触发器、事务

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  6. anaconda 及python pip安装 类库等问题收集

    在win7下 通过anaconda安装jieba 报如下错误: 问题1:TypeError: parse() got an unexpected keyword argument 'transport ...

  7. 用vs2012编译cocos2dx-3.9

    这几天想玩一下cocos2dx3.9新版本的东西,但是公司电脑配置不够,开个vs2012都卡的不行,更别提高版本的了.因为cocos2dx-3.9中使用了好多c++11的规范,而vs2012有好多C+ ...

  8. Win10家庭版无法打开策略组问题

    Win10家庭版无法打开策略组问题 • 复制以下代码至记事本中 @echo off pushd "%~dp0" *.mum >List.txt *.mum >>L ...

  9. Unity 自定义编辑器窗口 画线

    最近在学习状态机, 想自己实现一个可视化编辑器, 需要将多个状态之间用线条连接起来, 效果如下: 代码如下: Material m;Vector2 start;Vector2 end;Color co ...

  10. 零基础学Python之结构化数据（附详细的代码解释和执行结果截图）

    3结构化数据 字典(查找表).集合.元组.列表 3.1字典 是有两列任意多行的表,第一列存储一个键,第二列存储一个值. 它存储键/值对,每个唯一的键有一个唯一与之关联的值.(类似于映射.表) 它不会维 ...