这篇文章主要结合Struts2+json+Highcharts实现动态数据的显示。为了节省时间,就不写数据库了。在action中用一个集合来模拟从数据库取到的数据。模拟数据为三个学生在不同时间成绩的变化情况:

 
张三
李四
王五
第一周
90
86
95
第二周
95
98
91
第三周
80
64
76
第四周
85
75
90

注意本例中用到的数据为JSON数据。因此在action中声明返回json数据的变量并提供get/set方法。如:

1
2
// 返回学生信息的JSON数据
private String result;

模拟的数据和将数据集合转换成json格式的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
public String demo() {
        // 假如查询出来了三个学生信息
        dataList = new ArrayList();
        StudentScore stu1 = new StudentScore();
        StudentScore stu2 = new StudentScore();
        StudentScore stu3 = new StudentScore();
 
        stu1.setName("张三");
        List allgrade1 = new ArrayList();
        allgrade1.add(90);
        allgrade1.add(95);
        allgrade1.add(80);
        allgrade1.add(85);
        stu1.setData(allgrade1);
        dataList.add(stu1);
 
        stu2.setName("李四");
        List allgrade2 = new ArrayList();
        allgrade2.add(86);
        allgrade2.add(98);
        allgrade2.add(64);
        allgrade2.add(75);
        stu2.setData(allgrade2);
        dataList.add(stu2);
 
        stu3.setName("王五");
        List allgrade3 = new ArrayList();
        allgrade3.add(95);
        allgrade3.add(91);
        allgrade3.add(76);
        allgrade3.add(90);
        stu3.setData(allgrade3);
        dataList.add(stu3);
 
        try {
            result = JSONSerializer.toJSON(dataList).toString();
            System.out.println("json:" + result);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "query_success";
    }
        返回的数据一定要是json格式的。如:

1
json:[{"data":[90,95,80,85],"name":"张三"},{"data":[86,98,64,75],"name":"李四"},{"data":[95,91,76,90],"name":"王五"}]
        struts.xml文件配置如下:

1
2
result
truefalsetext/html
        注意:result的type为json类型。
        js代码和以前的差不多,只是增加了一个ajax方法。如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$(function() {
    $.ajax({
        type : "POST",
        dataType : "JSON",
        url : "HighChartActionUrl_demo.action",
        success : function(result) {
            // 解析action中发过来的数据
            var userdata = eval('(' + result + ')');
            new Highcharts.Chart({
                chart : {
                    renderTo : 'gridTable1', // 放置图表的DIV容器对应的id属性
                    type : 'column' // 图表类型line, spline, area, areaspline,
                // column, bar, pie , scatter
                },
                title : {
                    text : '学生成绩' // 图表标题
                },
                subtitle : {
                    text : '10级3年2班' // 副标题
                },
                xAxis : {
                    categories : [ '第一周', '第二周', '第三周', '第四周', ]
                // x轴
                },
                credits : {
                    text : 'demo', // 设置LOGO区文字
                    href : 'http://www.javakfz.com' // 设置LOGO链接地址
                },
                exporting : {
                    enabled : true
                },
                yAxis : {
                    min : 0,
                    title : {
                        text : '成绩 (分)'
                    }
                },
                legend : {
                    layout : 'vertical',
                    backgroundColor : '#FFFFFF',
                    align : 'left',
                    verticalAlign : 'top',
                    x : 100,
                    y : 70,
                    floating : true,
                    shadow : true
                },
                tooltip : {
                                                 //当鼠标悬置数据点时的格式化提示
                    formatter : function() {
                        return '' + this.x + ': ' + this.y + '分';
                    }
                },
                plotOptions : {
                    column : {
                        dataLabels : {
                            enabled : true
                        },
                        pointPadding : 0.2,
                        borderWidth : 0
                    }
                },
                series : userdata
            });
        }
    });
});
 
        通过上面的代码,可以看出只有series发生了变化,前面的例子数据都是不变的,而这个例子的数据完全是动态显示的。Highcharts的使用还是比较简单的,例子只是用来入门的,还有很多高级特征就需要自己开发了。另外附上最终的效果图:

原创文章,转载请注明: 转载自java开发者

本文链接地址: highCharts+Struts2生成柱状图

highCharts+Struts2生成柱状图的更多相关文章

  1. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  3. html5生成柱状图(条形图)

    <html> <canvas id="a_canvas" width="1000" height="700">< ...

  4. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  5. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  6. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  7. 使用jfreechart生成柱状图、折线图、和饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...

  8. struts2生成随机验证码图片

    之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...

  9. nodejs搭配phantomjs highcharts后台生成图表

    简单分享一下,后台使用nodejs结合highcharts.phantomjs生成报表图片的方法.这主要应用在日报邮件. 主要参考以下资料: http://www.highcharts.com/com ...

随机推荐

  1. Google Maps API v2密钥申请

    1. 进入到Google APIs Console页面 https://code.google.com/apis/console/ 点击左边导航栏的Seivices进入 在All services 的 ...

  2. HDU 5296 Annoying problem

    Annoying problem Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  3. jQuery实现滚动栏一直处于最底部

    相信大家有时候在展示一些实时数据展示并且数据量非常大的时候,由于无法在同一页面看到最有效的数据,所以我们须要将滚动栏至于底部.以便我们看到最须要的数据和信息.这里非常明显的样例那拿windows的pi ...

  4. visio 画图工具

    1.线条 [设计] ---  [页面设置]----打开 对话框 [布局与排列]-----[排列]   ----  [样式] ---   [直 2.word中插入viso 插入→对象→visio

  5. mongodb安装的两条命令

    1. 安装 下载并安装,注意安装方式为custom,路径自定义(d:\chengxu\mongodb),安装成功后在mongodb文件夹下新建data文件夹(内新建db文件夹)和logs文件夹(内新建 ...

  6. mysql处理大数据合并的另一种方法

    在做项目的时候我碰到了一个这样的场景,有两张表,数据都在300W左右,现在要求在生产环境中合并这两张表为一张表,本来想用sql语句insert into select来实现,后来发现这样操作速度很慢, ...

  7. PHP-解码unicode编码的中文字符

    在Python中使用 "\uxxxx".decode("unicode_escape") 1. class Helper_Tool { public stati ...

  8. JBoss类隔离

    http://tiger888.iteye.com/blog/572875这几天,项目组在部署JBOSS时遇到不少问题,都是由于JBOSS的类装载问题引起,特发表一篇BLOG详细说一下JBOSS的类隔 ...

  9. windows Service 2012 系统时间格式带中文

    C# 获取DataTime.Now   显示     2019年4月23日 下午 10:03:00 导致转换格式失败, 因为 源码中写的是   DataTime.Now.ToString();   输 ...

  10. java中finalkeyword使用说明

    必须在域的定义处或者每一个构造器中用表达式对final进行赋值,这正是final域在使用前总是被初始化的原因所在.