做了一个简单的基于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组件系列——JsPlumb制作流程图及相关效果详解

    上    篇 前言:之前项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. Jsplumb官网:htt ...

  2. Codeforces 909 D. Colorful Points (模拟)

    题目链接: Colorful Points 题意: 给出一段字符串(长度最大为1e6),每次操作可以删除字符串中所有相邻字符与其不同的字符.例如:aabcaa 删除一次就变成了aa,就无法再删除了.题 ...

  3. Codeforces Round #452 (Div. 2)

    第一次打..(太弱(+99积分是几个意思 A 题意:一堆数,只有1和2,问最多凑出多少个3. 分情况即可 #include<cstdio> int main(){ int a=0,b=0, ...

  4. HTML5和CSS基础

    1 HTML 基本语法 html标签 单标签 <img /> .<img> 双标签 <html> </html> 属性 属于标签 <img src ...

  5. python数据分析的工具环境

    python做数据分析的优势: 拥有大量的库为数据分析和处理提供了完整的工具链 随着库还在不断的增加的同时, 算法的实现也更加的创新.Numpy, matplotlib, scipy,scikit-l ...

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

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

  7. Haproxy介绍、安装与配置

    Haproxy技术详解一. 介绍HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理.HAProxy特别适用于那些负载特大的web ...

  8. Spring入门学习笔记（3）——事件处理类

    目录 Spring中的事件处理 Spring内建事件 监听Context事件 Example 自定义Spring事件 Spring中的事件处理 ApplicationContext 是Spring的核 ...

  9. 欢迎来怼--第三十七次Scrum会议

    一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 小组照片 二.开会信息 时间:2017/12/3 17:50~18:23,总计33min. 地点 ...

  10. 20180711-统计PDB中的蛋白质种类、膜蛋白文件个数及信息等

    20180710完成这份工作.简单,但是完成了还是很开心.在我尝试如何使用pickle保存数据后,尝试保存PDB文件中“HEADER”中的信息.文件均保存于实验室服务器(97.73.198.168)/ ...