前台页面jsp
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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!-- lang: java --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="${ctx}/common/chartJs/highcharts.js"></script> <script src="${ctx}/common/chartJs/modules/exporting.js"></script> <script type="text/javascript"> $(document).ready(function() { $.post("${ctx}/chart/updateChartAction2.do", function(json) { new Highcharts.Chart({ chart : { //将图表显示至 container div renderTo : 'container', //char的类型 line, spline, area, areaspline, column, bar, pie and scatter type : 'line', //上边距 marginRight : 130, //下边距 marginBottom : 45, //不显示动画(性能) animation : false }, //标题 title : { text : 'Monthly Average Temperature', //The x position of the title relative to the alignment within chart.spacingLeft and chart.spacingRight. Defaults to 0. x : 0 }, //子标题 subtitle : { text : 'Source: WorldClimate.com', x : 0 }, //x轴 标题 xAxis : { //Can be one of "linear", "logarithmic", "datetime" or "category". type : 'category' }, //y轴 标题 yAxis : { title : { text : '测试数据(%)' }, labels : { format : '{value} %' }, //基准线 plotLines : [ { //基准线类型 点线 dashStyle: 'Dash', //The position of the line in axis units. value : 80, //The width or thickness of the plot line. width : 1, //y轴上的刻度线颜色 color : '#EE0000' } ] }, //当鼠标放在point上时,显示的单位/后缀 tooltip : { //是否显示tip enabled: true, //是否可以比较 shared: false, //可现实小数位数 valueDecimals: 1, //前缀 valuePrefix : '', //后缀 valueSuffix : '%' }, //绘图项设置 plotOptions : { line : { //超过阀值的颜色 color: '#FF0000', //未超过阀值后的颜色 negativeColor: '#0088FF', //阀值 threshold : 80, //线条 是否趋势成动画显示 animation: { duration: 2000 } } }, //图例框 legend : { enabled: true, //The layout of the legend items. Can be one of "horizontal" or "vertical". layout : 'vertical', //The horizontal alignment of the legend box within the chart area. Valid values are "left", "center" and "right" align : 'left', //The vertical alignment of the legend box. Can be one of "top", "middle" or "bottom". //Vertical position can be further determined by the y option. Defaults to bottom. verticalAlign : 'top', //The x offset of the legend relative to it's horizontal alignment align within chart. x : 0, //The vertical offset of the legend relative to it's vertical alignment verticalAlign within chart. y : 100, //The width of the drawn border around the legend. Defaults to 1. borderWidth : 1 }, //去掉highChart网站连接url credits : { enable : true }, //去掉导出按钮 exporting : { enabled : true }, //数据,个人认为这种方法,最强之处就在于series传值完全通过json。 series : json }); }, "json"); }); </script> </head> <body> <div id="container" style="min-width: 400px; height: 420px; margin: 0 auto"></div> </body> </html> |
后台使用json传送数据。这里使用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 43 44 45 46 47 48 49 50 |
<!-- lang: java --> /** * 方法二:组织成json传送到前台 */ public void updateChartAction2(){ List<Chart> c1 = chartService.getChartByName("beijing"); List<Chart> c2 = chartService.getChartByName("shanghai"); try { JSONObject obj1 = this.writeJSON("beijing", c1); JSONObject obj2 = this.writeJSON("shanghai", c2); /** * 组合成 * [ * name:xxx * data: {[x1,y1],[x2,y2], ... } * ] */ JSONArray all = new JSONArray(); all.put(obj1); all.put(obj2); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.getWriter().write(all.toString()); response.getWriter().flush(); } catch (IOException e) { e.printStackTrace(); } } public JSONObject writeJSON(String nameVlu, List<Chart> list) { // 组合成{[x1,y1],[x2,y2], ... } JSONArray jsonArray = new JSONArray(); for (int i = 0; i < list.size(); i++) { JSONArray sub = new JSONArray(); sub.put(list.get(i).getcTime()); sub.put(list.get(i).getCdata()); jsonArray.put(sub); } /** * 组合成 name:xxx data: {[x1,y1],[x2,y2], ... } */ JSONObject jsonObject = new JSONObject(); jsonObject.put("name", nameVlu); jsonObject.put("data", jsonArray); return jsonObject; } |