首先,我要说,Highcharts这个东西非常好。
后台数据支持json和xml
贴一个简单的例子,并附上后台数据,这里返回的是JSON,框架使用的是springMVC
场景描述:监控某个进程的cpu资源使用,并在前台显示
后台关键代码:
/** * test * @param model * @param request * @return */ @RequestMapping("/monitor/index.do") public String index(ModelMap model, HttpServletRequest request) { return "view/monitor"; } /** * 测试highchart * @param filename * @return */ @RequestMapping("/monitor/test.do") public @ResponseBody String test(String filename){ String mem = null; try { mem = getmem(filename); } catch (Exception e) { e.printStackTrace(); } return mem; }
private static String getmem(String filename) throws Exception{ SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); StringBuffer result = new StringBuffer(); BufferedReader br = new BufferedReader(new InputStreamReader(MonitorAct.class.getResourceAsStream("/"+filename))); String line = null; String[] ary = null; result.append("["); line=br.readLine(); while(line!=null){ result.append("["); ary = line.split(">"); result.append(sdf.parse(ary[0]).getTime()).append(",").append(ary[1]); result.append("]"); line=br.readLine(); if(line != null){ result.append(","); } } result.append("]"); return result.toString(); }
filename中的数据格式为,格式随意,是key-value就OK
2013-11-19 10:17:47>51.9 2013-11-19 10:17:50>14.0 2013-11-19 10:17:53>2.0 ...
前台代码,JSP
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <script src="${base}/resources/js/jquery.js"></script> <script src="${base}/resources/js/highstock.js"></script> <script src="${base}/resources/js/exporting.js"></script> <script type="text/javascript"> $(function() { var seriesOptions = [], yAxisOptions = [], seriesCounter = 0, names = ['cpu2.log','cpu2.log']; colors = Highcharts.getOptions().colors; $.each(names, function(i, name) { $.getJSON('${base}/monitor/test.do?filename='+name, function(data) { seriesOptions[i] = { name: name, data: data }; seriesCounter++; if (seriesCounter == names.length) { createChart(); } }); }); function createChart() { alert(seriesOptions); $('#container').highcharts('StockChart', { chart: { }, rangeSelector: { selected: 4 }, title: { text: "cpu使用" }, xAxis: { labels: { formatter: function() { return this.value; } } }, yAxis: { labels: { formatter: function() { return (this.value > 0 ? '+' : '') + this.value + '%'; } }, plotLines: [{ value: 0, width: 2, color: 'silver' }] }, plotOptions: { series: { //compare: 'percent' } }, tooltip: { pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}%</b><br/>', valueDecimals: 2 }, series: seriesOptions }); } }); </script> </head> <body> <div id="container" style="height: 500px; min-width: 300px"></div> </body> </html>
这里,不得不提醒大家,关于highchart div容器的问题,在我使用时发现这样的问题,浏览器-firefox25.0.1。
debug提示错误显示
Highcharts error #13 http://www.highcharts.com/errors/13
根据地址,官方说明的比较清楚
Highcharts Error #13 Rendering div not found This error occurs if the chart.renderTo option is misconfugured so that Highcharts is unable to find the HTML element to render the chart in.
问题就出在div的id上面...在我的id中带有"."号,居然不行...没法,本来是直接用的ip,改用hostname了。
最后附上一张效果图
相关推荐
Highcharts在Java后台导出图片到PDF和EXCEL文件中示例代码,程序放到MyEclipse8.6中编译后可直接放到Tomcat6及以上版本运行,程序中含有jar包,下载后不用操心到处找jar包,在MyEclipse8.6里建立普通的Web工程就可以...
Java和Highcharts结合实现折线图
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
Highcharts的java后台生成各种图片,经过测试生成图片时间比较长,大概的3-7秒。直接运行demo,SimpleExport测试类,直接测试
无需使用导出服务器,直接在客户端中导出highcharts所绘的图像,速度相当快
EasyUI图表插件Highcharts源码Demo(Java)
绝对能用。一般人都能看懂。直接调用方法即可。不用谢js
java实现的highcharts与ajax结合动态实时获取数据更新图表
Highcharts插件所需文件,直接解压后添加到项目中存放js文件的目录下即可!
Java中HighCharts实例demo,全篇完整。一个开源的图标库,功能很强大,最近打算简单学习下,涵盖从后台获取数据传到前台,也可以在前端通过AJAX获取数据
jquery Highcharts jquery Highcharts jquery Highcharts
highcharts-java 高图 Java 为 Highcharts 库制作了这个适用于 Java 的迷你适配器,它会为 javascript 吐出图表对象,这里没有事件处理程序,但钻取确实有效,您可以在钻取图表类型之间切换。 使用 Highcharts ...
报表显示 highcharts 报表显示 highcharts 报表显示 highcharts
Highcharts-2.3.5 是一个用纯...HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zongzhankui/article/details
附件就是一个java Web工程,导入myeclipse后可以直接运行,该实例是一个线性图,异步ajax到服务器servlet读取数据。
整理的highcharts本地导出图片功能,其中的export项目可以直接运行
3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。 4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动...
HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。现在官方的最新版本为...