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";     }

        返回的数据一定要是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生成柱状图