highchart与struts2实现动态曲线图
2014-07-16 21:02
309 查看
highchart通过ajax从后台取数据,当然我这里的数据是模拟的随机数,话不多说,上代码
后台action:
struts2配置文件:
jsp代码:
好了OK啦,上个效果图吧最后
后台action:
package action; import java.util.Random; public class ChartAction { private int account; public String sendData() { account = new Random().nextInt(100); return "success"; } public int getAccount() { return account; } public void setAccount(int account) { this.account = account; } }
struts2配置文件:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <constant name="struts.devMode" value="true" /> <constant name="struts.i18n.encoding" value="UTF-8"></constant> <!-- Dynamic method invoke/DMI --> <constant name="struts.enable.DynamicMethodInvocation" value="true" /> <package name="main" namespace="/" extends="json-default"> <action name="index"> <result> index.jsp </result> </action> <action name="data" class="action.ChartAction"> <result type="json"> <param name="root">account</param> </result> </action> </package> </struts>js文件,这才是最主要的东西:
$(function () { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo:'container', type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function() { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } } }, title: { text: '测试小DEMO' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { max:100, min:0, title: { text: 'y轴' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: true }, exporting: { enabled: false }, series: [{ name: '测试第一条数据', data: (function() { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random()*100 }); } return data; })() }] }); function getData() { $.post("data!sendData.action", function(data) { var x = new Date().getTime(); var y = data; var series = chart.series[0]; series.addPoint([x, y], true, true); },"json"); } setInterval(getData,1000); }); });
jsp代码:
<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>AnysCharts</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/exporting.js"></script> <script type="text/javascript" src="js/myCharts.js"></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <div id="container" style="width:800px;height:400px;margin:0 auto;"></div> </body> </html>
好了OK啦,上个效果图吧最后
相关文章推荐
- Flex 实现LineChart曲线——动态加载组件
- Visual C++6.0实现动态曲线4种方法
- 基于VC的连续挤压机主轴转速的动态曲线的实现
- 使用Struts2实现文件的上传与动态下载(1)
- Web项目中使用java Struts2实现Zip、xml文件的动态创建和下载(Zip文件中动态存在多个xml文件)
- Struts2实现动态验证码的生成和验证
- asp.net+VML+XMLHTTP实现无刷新动态曲线图(附源码)
- ASP.NET中实现动态曲线图的视频教程
- WPF DynamicDataDisplay 实现动态曲线图 双击获得数据点
- highchart实时曲线实例:highchart实时曲线,java web
- High Dynamic Range高动态范围的实现
- 在网页上实现实时动态曲线——利用Highcharts控件和JQuery
- struts2 动态方法调用实现方法
- Amcharts 实现动态曲线图
- MsChart实现无闪烁动态曲线(MFC)
- OA (ssh) 基本实现(poi 生成 Excel , struts2动态下载 mysql) 学习笔记(含源代码)
- MsChart实现无闪烁动态曲线(MFC)
- highcharts 高级应用—动态曲线的实现
- 使用Struts2实现文件的上传与动态下载(2)
- 用struts2 标签和Jquery 插件实现动态值,自动检索填充中值