做了一个简单的基于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. post提交方式

    post提交方式 为提交 url 路径后的name值 getParameter 是获取url后面的参数的.getattribute 是获取 自己setattribute的.

  2. 通俗地讲Node.js是什么

    前后端分离,使得后台只需关注服务即可,但有时候开发的不同步,前台往往需要等待后台的接口,通俗的说,“node.js就是一个前端觉得写个功能还要等后端捣鼓半天,然后干脆就自己用javascript把后端 ...

  3. dbutis事务管理

    1.在dao层用dbutils实现事务管理 //从a--->b帐户转100元 public void transfer() throws SQLException{ Connection con ...

  4. 维诺图（Voronoi Diagram）分析与实现（转）

    一.问题描述1.Voronoi图的定义又叫泰森多边形或Dirichlet图,它是由一组由连接两邻点直线的垂直平分线组成的连续多边形组成. 2.Voronoi图的特点(1)每个V多边形内有一个生成元: ...

  5. .net中 多线程 笔记(基础)

    1. 在进程中可以有多个线程同时执行代码.进程之间是相对独立的,一个进程无法访问另一个进程的数据(除非利用分布式计算方式),一个进程运行的失败也不会影响其他进程的运行,Windows系统就是利用进程把 ...

  6. 【Unity Shader】渲染管线

    流程概述 应用程序阶段 应用程序阶段,使用高级编程语言(C.C++.JAVA 等)进行开发,主要和CPU.内存打交道,诸如碰撞检测.场景图建立.空间八叉树更新.视锥裁剪等经典算法都在此阶段执行.在该阶 ...

  7. CentOS7下，防火墙设置

    CentOS中防火墙程序主要是firewall和iptables两种. CentOS7中firewall服务已经默认安装好了,而iptables服务需要自己用yum install  iptabes- ...

  8. WebRtc与SIP

    最近研究一下 webrtc ,看了几篇paper,之前也尝试运行验证了几个demo,现在把我的理解总结到这里. WebRTC 简介 WebRTC,名称源自网页实时通信(Web Real-Time Co ...

  9. KClient——kafka消息中间件源码解读

    目录 kclient消息中间件 kclient-processor top.ninwoo.kclient.app.KClientApplication top.ninwoo.kclient.app.K ...

  10. CocoStuff—基于Deeplab训练数据的标定工具【五、训练成果分析】

    一.说明 本文为系列博客第五篇,主要展示训练的结果,以及对训练进行分析. *注:暂未进行大量的数据训练以及IoU测算,目前只做到使用Matlab将训练结果的mat文件可视化. 二. *占坑