做了一个简单的基于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. EVA无法连接

    EVA在11月19日更新后,发现DMS无法与EVA进行链接,在DMS中EVA连接测试报告中有如下报错:   根本原因   解决方法/修复 1.在本地电脑系统盘中查找文件夹“.eva-prod”, 并拷 ...

  2. Cisco Packet Tracer中两台电脑通信设置

    Cisco Packet Tracer是网络初学者仿真模拟网络环境的必备工具.今天我们来模拟下两台电脑之间的通信. Cisco Packet Tracer版本6.2.0 一.添加设备 1.这里添加一个 ...

  3. Android Library开发注意事项

    Android Library开发注意事项 App Module添加依赖Android Library时可以设置library的优先级, 在编译时,app按照library从低到高的优先级依次与每个l ...

  4. 树莓派操控SG90舵机

    目录 舵机接线 PWM介绍 使用PWM控制舵机 这里使用树莓派来操作sg90的舵机.先看一下这个舵机的样子: 这就是传说中的SG90舵机啦,转角是0-180. SG90舵机接线: SG90舵机有三条线 ...

  5. shentou mianshiti

    给你一个网站你是如何来渗透测试的? 在获取书面授权的前提下.1)信息收集,1,获取域名的whois信息,获取注册者邮箱姓名电话等.2,查询服务器旁站以及子域名站点,因为主站一般比较难,所以先看看旁站有 ...

  6. == 和 equals 的区别是什么？

    已经有很多人说过二者的区别了,我直接上代码. String strA = "123"; String strB = "123"; String strC = & ...

  7. java.io.tmpdir指定的路径在哪？

    Java.io.tmpdir介绍 System.getproperty(“java.io.tmpdir”)是获取操作系统缓存的临时目录,不同操作系统的缓存临时目录不一样, 在Windows的缓存目录为 ...

  8. Sentence | Never underestimate yourself.

    "\(Our\) \(deepest\) \(fear\) \(is\) \(not\) \(that\) \(we\) \(are\) $inadequate. $ \(Our\) \(d ...

  9. Spring Boot + MyBatis + Pagehelper 配置多数据源

    前言: 本文为springboot结合mybatis配置多数据源,在项目当中很多情况是使用主从数据源来读写分离,还有就是操作多库,本文介绍如何一个项目同时使用2个数据源. 也希望大家带着思考去学习!博 ...

  10. Shader做剪影效果

    某渣渣甩了一个需求给我,并且说我不会写.我明知是激将法,但是想想这需求也太简单了,我好像也不怎么会QAQ.为了表示我对shader的热爱,写就写. 需求是这样的: 这是一个漂亮的MM,但是渣渣不想让人 ...