项目做了一个报表,可以实时的观察呼叫中心的电话访问量,之前的版本是使用JFreechart做的,使用一段时间后出现内存溢出,服务器的内存使用量会变得很大,所以改用Ajax前台加载数据的方式实现实时报表功能,查了很久选择了JQuery结合Highcharts的方式,Highcharts是一个JS实时报表API,下面给出基本代码:
首先,要添加JQuery和Highcharts的引用:
<script type='text/javascript' src='js/jquery-1.3.2.js'></script>
<script type='text/javascript' src='js/highcharts.js'></script>
页面的body部分需要有个层用来渲染图表:
<body>
<div id="container" style="height: 400px"></div>
</body>
在JS中声明图表:
<script type='text/javascript'>
//<![CDATA[
$(function(){
//声明报表对象
var chart = new Highcharts.Chart({
chart: {
//将报表对象渲染到层上
renderTo: 'container'
},
//设定报表对象的初始数据
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
function getForm(){
//使用JQuery从后台获取JSON格式的数据
jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(data) {
//为图表设置值
chart.series[0].setData(data);
});
}
$(document).ready(function() {
//每隔3秒自动调用方法,实现图表的实时更新
window.setInterval(getForm,3000);
});
});
//]]>
</script>
分享到:
相关推荐
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
文件仅有两个文件,一个是HighCharts做的曲线图标htm,使用JQuery Ajax接收JSON字符串,后台使用java HttpServeltResponse json, out.write("....");此例运行需要官方的js demo包,部分java方法代码如下涵盖两条曲线,str...
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图
网上的资源将的都很笼统也不全面,我也是在学习这些东西,把自己写的稍微整合了一下,应该时候新手看,能够完全运行,只要自己附加...Jquery中easyui的运用,ajax后台数据的传输,Json的拼接,highcharts获取后台数据!
结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 支持多坐标轴 多个数据进行对比这是非常常见的需求,Highcharts 可以让你为每个类型的数据添加...
Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...
纯JS的图表插件,效果非常绚丽。只要提供JSON数据,JS自动生成图表,柱状、曲线图、饼图等。
Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...
结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...
结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、...
框架使用场景:OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统 框架主要运用技术: 1、前端技术 JS框架:jquery-2.1.1、Bootstrap.js、JQuery UI CSS框架:Bootstrap v3.3.4(稳定是后台,UI方面根据...
图表插件:echarts、highcharts 日期控件: My97DatePicker 2、后端技术 核心框架:ASP.NET MVC5、WEB API 持久层框架:EntityFramework 6.0 定时计划任务:Quartz.Net组件 安全支持:过滤器、Sql注入、...
本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置。 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highcharts 库: 文件名:HighchartsTest.htm Highcharts 教程 | 软件开发网 $...
框架使用场景:OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统 框架功能: 1.系统管理 机构管理、角色管理、岗位管理、用户管理、数据字典、区域管理 2.权限管理 系统菜单、系统按钮、角色权限分配 3....
图表插件:echarts、highcharts 日期控件: My97DatePicker 2、后端技术 核心框架:ASP.NET MVC5、WEB API 持久层框架:EntityFramework 6.0 定时计划任务:Quartz.Net组件 安全支持:过滤器、Sql注入、请求...
数据图使用 JavaScript、Highcharts、jQuery、Bootstrap、Underscore.js 和其他库创建的交互式数据可视化仪表板。 DataPlot 根据用户选择交互式修改绘图,并使用线性回归绘制最适合的趋势线。 PapaParse.js 用于将 ...
图表插件:echarts、highcharts 2、后端技术 核心框架:ASP.NET MVC5、WEB API 持久层框架:EntityFramework 定时计划任务:Quartz.Net组件 安全支持:过滤器、Sql注入、请求伪造 服务端验证:实体模型验证...
是使用 jquery、jquery UI、bootstrap 和 highcharts 开发的。 该工具解析 xml 输入,将其转换为可读的 json,然后将从 json 中提取的数据绘制到图形中。 它支持 Blast 输出版本 BLASTP 2.2.29+。
JSON (JavaSript Object Notation) AJAX (Asynchronous JavaScript and XML) Selector Priority Specificity Box Model W3C HTML CSS ...