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生成柱状图

转载于:https://www.cnblogs.com/hongzai/p/3210501.html