jsp页面：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String categories="[ '狗', '猫', '兔子', '老虎', '大象']";
String data="[10,13,15,17,19]";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//x轴值
var categories=<%=categories%>;
//y轴值
var data=<%=data%>;
//创建图表
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart( {
chart : {
renderTo : 'container',
type : 'bar',
events : {
load : st// 定时器
}
},
title : {
text : '动物数量统计'
},
xAxis : {
categories : categories,
title : {
text : 'name'
}
},
yAxis : {
min : 0,
title : {
text : 'number'
}
},
legend: {
enabled: false
},
tooltip : {
formatter : function() {
return '' + this.series.name + ': ' + this.y + '';
}
},
credits : {
enabled: false
},
plotOptions : {
series : {
stacking : 'normal'
}
},
series : [ {
name : '个',
data : data
} ]
});
});
//10秒钟刷新一次数据
function st() {
setInterval("getData()", 10000);
}
//动态更新图表数据
function getData() {
var categories = [];
$.ajax({
type: "post",
url: "${pageContext.request.contextPath}/highchart",
dataType: "json",
success : function(data){
var d = [];
$(data).each(function(n,item){
d.push(item.data);
categories.push(item.categories);
})
chart.series[0].setData(d);
chart.xAxis[0].setCategories(categories);
}
});
}
</script>
</head>
<body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/highcharts.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/funnel.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/highcharts-more.js"></script>
<div id="container" ></div>
</body>
</html>
没有账户的朋友邮箱联系我,发demo给你：2057017365@qq.com
分享到：
相关推荐
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
Java中HighCharts实例demo,全篇完整。一个开源的图标库，功能很强大，最近打算简单学习下，涵盖从后台获取数据传到前台，也可以在前端通过AJAX获取数据
• 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库； • 提示功能：鼠标移动到图表的某...
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： • 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； • 对个人用户完全免费； • 纯JS，无BS； • 支持大部分的图表类型：柱状图，直线图，...
结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。 支持多坐标轴 多个数据进行对比这是非常常见的需求，Highcharts 可以让你为每个类型的数据添加...
此例运行需要官方的js demo包,部分java方法代码如下涵盖两条曲线,str中定义的原始数据,请结合实际项目从数据库中查询,并且组合,自己用了1个小时做的例子>> 请参阅 public void loadReport(HttpServletRequest req, ...
结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。 图表种类丰富 Highmap s中有各种地图类型：你可以制作兴趣地图，在地图上画气泡等，这些功能是和...
Highcharts 强大的jQuery图表制作功能 Highcharts是一个制作图表的Javascript类库，主要特性： 1、提示功能：鼠标移动到图表的某一点上有提示信息 2、放大功能：选中图表部分放大，近距离观察图表 3、对个人用户...
结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。 范围选择器 在处理大数据集时，我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...
结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。 范围选择器 在处理大数据集时，我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...
java+echarts实现动态图表，jsp前台页面通过ajax异步请求，controller层处理完数据返回前台实现动态图表。 一个简单实例： 1. 前台echarts图表依赖js文件： echarts.js 下载地址 ：...
Redis缓存(Jedis客户端+连接池)实时热门数据统计 Spring Mail + Spring Task完成异步发送激活链接，邮件发送，验证 Jquery BootStrap Ajax springBoot Guava Cache(java工具类集的基础库,注册key的绑定)...
后台主要是springboot+mybatis+shiro+jsp(jsp已过时)…，前端界面主要使用bootstrap框架搭建，并使用了ueditor富文本编辑器、highcharts图表库 系统划分与功能 该系统分为前台展示和后台管理两大模块。 前台主要是为...
├── Highcharts 图表插件 ├── echarts 百度图标插件 ├── datatables 表格排序，检索插件 ├── WebUploader 百度文件上传组件 ├── lightbox2 图片预览组件 ├── html5shiv.js html5插件，让低版本...