highCharts+Struts2生成柱状图
这篇文章主要结合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" ; } |
1
|
json:[{ "data" :[90,95,80,85], "name" : "张三" },{ "data" :[86,98,64,75], "name" : "李四" },{ "data" :[95,91,76,90], "name" : "王五" }] |
1
2
|
result truefalsetext/html |
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区文字 }, 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 }); } }); }); |

原创文章,转载请注明: 转载自java开发者
本文链接地址: highCharts+Struts2生成柱状图
highCharts+Struts2生成柱状图的更多相关文章
- HighCharts之2D柱状图
1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...
- 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
- html5生成柱状图(条形图)
<html> <canvas id="a_canvas" width="1000" height="700">< ...
- HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- 使用jfreechart生成柱状图、折线图、和饼状图
JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...
- struts2生成随机验证码图片
之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...
- nodejs搭配phantomjs highcharts后台生成图表
简单分享一下,后台使用nodejs结合highcharts.phantomjs生成报表图片的方法.这主要应用在日报邮件. 主要参考以下资料: http://www.highcharts.com/com ...
随机推荐
- Google Maps API v2密钥申请
1. 进入到Google APIs Console页面 https://code.google.com/apis/console/ 点击左边导航栏的Seivices进入 在All services 的 ...
- HDU 5296 Annoying problem
Annoying problem Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- jQuery实现滚动栏一直处于最底部
相信大家有时候在展示一些实时数据展示并且数据量非常大的时候,由于无法在同一页面看到最有效的数据,所以我们须要将滚动栏至于底部.以便我们看到最须要的数据和信息.这里非常明显的样例那拿windows的pi ...
- visio 画图工具
1.线条 [设计] --- [页面设置]----打开 对话框 [布局与排列]-----[排列] ---- [样式] --- [直 2.word中插入viso 插入→对象→visio
- mongodb安装的两条命令
1. 安装 下载并安装,注意安装方式为custom,路径自定义(d:\chengxu\mongodb),安装成功后在mongodb文件夹下新建data文件夹(内新建db文件夹)和logs文件夹(内新建 ...
- mysql处理大数据合并的另一种方法
在做项目的时候我碰到了一个这样的场景,有两张表,数据都在300W左右,现在要求在生产环境中合并这两张表为一张表,本来想用sql语句insert into select来实现,后来发现这样操作速度很慢, ...
- PHP-解码unicode编码的中文字符
在Python中使用 "\uxxxx".decode("unicode_escape") 1. class Helper_Tool { public stati ...
- JBoss类隔离
http://tiger888.iteye.com/blog/572875这几天,项目组在部署JBOSS时遇到不少问题,都是由于JBOSS的类装载问题引起,特发表一篇BLOG详细说一下JBOSS的类隔 ...
- windows Service 2012 系统时间格式带中文
C# 获取DataTime.Now 显示 2019年4月23日 下午 10:03:00 导致转换格式失败, 因为 源码中写的是 DataTime.Now.ToString(); 输 ...
- java中finalkeyword使用说明
必须在域的定义处或者每一个构造器中用表达式对final进行赋值,这正是final域在使用前总是被初始化的原因所在.