前台页面jsp
<!-- 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的便利之处,就在数据的格式更佳灵活。开发人员能够更灵活的控制数据的传递。
<!-- 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; }