1, and introduced highcharts.js jQuery.js
2, Html code and js code
//container3为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用
<div id="container3" style="width:380px;height:230px;margin:0 auto;padding-top: 10px">
</div>
/**
*
*/
$(function(){
Highcharts.setOptions({
//全局配置参数是针对所有 Highcharts 图表生效的配置，所以只能通过 Highcharts.setOption 函数来配置
global:{
useUTC:false //默认true
/*使用UTC的优点是，无论用户代理的时区设置如何，时间都显示得一样。当实时加载数据或需要正确的夏令时转换时，可以使用本地时间*/
}
});
//更新曲线上的点
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length -1]);
}
var chars;
$(document).ready(function(){
var options = {
// 图表定义
chart:{
backgroundColor:'transparent', //背景色
renderTo: 'container3',//图表渲染容器的 HTML 元素的 id 或对象引用
type:'spline', //曲线，修改spline可改为饼图等其他图表
marginRight:10,
events:{
//图表加载完成时触发
load:function(){
var series = this.series[0];
options = this;
activeLastPointToolip(options);
var t = 0;
var r = 0;
//ajax请求，获取后台数据
$.ajax({
url:'/Software-cup001/Current', //获取数据的页面地址
//默认值: true，dataType 为 script 和 json时默认为 false。设置为 false 将不缓存此页面。
cache:false,
dataType:"json",
data:{},
//仅在服务器数据改变时获取新数据。默认值: false
ifModified:false,
//获取数据成功，将数据放入result
success: function(result){
t = result.length; //获取到的数据的长度
}
});
//定时器，每秒钟获取一次数据
setInterval(function(){
$.ajax({
url:'/Software-cup001/Current',
//默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
cache:false,
dataType:"json",
data:{},
//仅在服务器数据改变时获取新数据。默认值: false
ifModified:false,
success: function(result){
if(r>result.length){
t=result.length;
}
//保证每次取数据都是从上次所取数据的后一个数据
//ajax每次取数据都是从头开始获取
r=result.length;
for(;t<result.length;t++){
if(result[t].site=="校园大门"){
var x = (new Date()).getTime();
//将符合的数据加入曲线图表
series.addPoint([x,result[t].headnum],true,true);
activeLastPointToolip(options);
}
}
// });
}
});
},1000);
}
}
},
colors:['#64E572'], //曲线颜色
title:{
//标题名称
text: '',
//标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px
x:-20
},
/*x轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调*/
xAxis:{
type:'datetime', //x轴类型，时间型
tickPixelInterval: 100, //决定了刻度之间间隔的像素值
},
//y轴，y轴的数据值最小为0
yAxis: {
startOnTick:true, //为true时，设置min生效
min:0,
//y轴标题
title: {
text: '数值',
},
//标示线
plotLines:[{
color:'red', //线的颜色，定义为红色
dashStyle:'solid', //默认值，这里定义为实线
value:3, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
width:2, //标示线的宽度，2px
label:{
text:'标准人数：3人', //标签的内容
align:'left', //标签的水平位置，水平居左,默认是水平居中center
x:10, //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
style:{
color:'white', //文字颜色
}
}
}]
},
//图例，图例说明是包含图表中数列标志和名称的容器
legend:{
align:'center',
floating:false,
borderWidth:0,
itemStyle:{
color:'#FFDAB9'
}
},
//数据提示框，显示每个点的含义（对应的x轴和y轴数据）
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, 0);
}
},
//版权信息
credits:{
enabled:false //版权信息不可见
},
//数据点信息
plotOptions: {
series: {
marker: {
enabled: false, /*数据点是否显示，不显示则为一条线*/
radius: 5, /*数据点大小px*/
//fillColor:'#ff3300' /*数据点颜色*/
},
},
},
//数据列
series:[{
name:'校园大门人流量' ,
//20个伪数据
data: (function () {
// 生成随机值
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()*10+3
});
}
return data;
}())
}]
};
chart = new Highcharts.Chart(options);
});
});
3、Highcharts
Highcharts provide CDN services, we can see a detailed description of the interface in the download
jQuery Download