Highcharts之实时柱状图

最新推荐文章于 2022-01-27 10:17:51 发布

贰货不二

最新推荐文章于 2022-01-27 10:17:51 发布

阅读量495

点赞数

分类专栏： Highcharts图表学习

本文链接：https://blog.csdn.net/erhuobuer/article/details/94596831

版权

Highcharts图表学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、导入highcharts.js和jQuery.js

2、Html代码和js代码

//container2为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用
<div id="container2" style="width:380px;height:230px;margin:0 auto;padding-top: 10px"> 
 </div>


$(function(){
	Highcharts.setOptions({
	//全局配置参数是针对所有 Highcharts 图表生效的配置，所以只能通过 Highcharts.setOption 函数来配置
		global:{
			useUTC:false     //默认true
	/*使用UTC的优点是，无论用户代理的时区设置如何，时间都显示得一样。当实时加载数据或需要正确的夏令时转换时，可以使用本地时间*/
		}
	});
var chars;
$(document).ready(function(){
//调用柱状图函数
	column()
});
});
function column(){
	var options = {
//			图表定义
			
			chart:{
				backgroundColor:'transparent',				//背景色
				
				renderTo: 'container2',//图表渲染容器的 HTML 元素的 id 或对象引用
				type:'column',				//柱状图，修改column可改为饼图等其他图表
				marginRight:10,

			},
			title:{      
			//标题名称    
              text: '',
               //标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px
              x:-20
          },
           /*x轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调*/
          xAxis:{
        	  labels: {
      			rotation: -45  // 设置轴标签旋转角度
      		},
      		//x轴为0~24小时
        	  categories: [
        		  '00~02', '02~04', '04~06', '06~08',
                  '08~10', '10~12', '12~14', '14~16', 
                  '16~18', '18~20', '20~22', '22~24'
      		],
      		crosshair: true

          },
        //y轴，y轴的数据值最小为0
          yAxis: {
        	  startOnTick:true,  //为true时，设置min生效
        	  min:0,
              
              title: {
                  text: '超出人数',
                  
              },
          },
                  
          
          //数据提示框，显示每个点的含义（对应的x轴和y轴数据）
          tooltip: {
        	  headerFormat: '<span style="font-size:10px">{point.key}</span><table><br>',
        	  pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      		'<td style="padding:0"><b>{point.y} 人</b></td></tr>',
          }, 
            //图例，图例说明是包含图表中数列标志和名称的容器
          legend:{
        	  enabled:false
          },
          //版权信息
          credits:{
        	  enabled:false
          },
        //数据列
        series:[{
        	colorByPoint: true,
        	name:'总超出人数',
        	
        }]
	};
	//ajax请求，获取后台数据
	$.ajax({
		url:'/Software-cup001/record_dataServlet',			//获取数据的页面地址
	
		//默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
		cache:false,
		dataType:"json",
		data:{},
		//仅在服务器数据改变时获取新数据。默认值: false
		ifModified:false,
		success: function(result){
			
			var data = [];
	//用于统计
			var suma1=0;   var suma6=0;   var suma12=0;     var sumb6=0;   var sumb12=0;
			var suma2=0;   var suma7=0;   var sumb1=0;   	var sumb7=0;
			var suma3=0;   var suma8=0;   var sumb2=0;   	var sumb8=0;
			var suma4=0;   var suma9=0;   var sumb3=0;   	var sumb9=0;
			var suma5=0;   var suma10=0;  var sumb4=0;   	var sumb10=0;
			var sum=0;	   var suma11=0;  var sumb5=0;   	var sumb11=0;
			var sumc1=0;   var sumc4=0;   var sumc7=0;   	var sumc10=0;
			var sumc2=0;   var sumc5=0;   var sumc8=0;   	var sumc11=0;
			var sumc3=0;   var sumc6=0;   var sumc9=0;   	var sumc12=0;
			var sumd1=0;   var sumd4=0;   var sumd7=0;   	var sumd10=0;
			var sumd2=0;   var sumd5=0;   var sumd8=0;   	var sumd11=0;
			var sumd3=0;   var sumd6=0;   var sumd9=0;   	var sumd12=0;
			var sume1=0;   var sume4=0;   var sume7=0;   	var sume10=0;
			var sume2=0;   var sume5=0;   var sume8=0;   	var sume11=0;
			var sume3=0;   var sume6=0;   var sume9=0;   	var sume12=0;
			
			//jQuery.each() 函数用于遍历指定的对象和数组
			jQuery.each(result, function(m,obj){
				if(parseInt(obj.startTime)>=0&&parseInt(obj.startTime)<2){
					
					if(suma1<obj.avgHeadNum&&obj.site=="校园大门"){
						suma1=obj.avgHeadNum;
					}
					else if(sumb1<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb1=obj.avgHeadNum;
					}
					else if(sumc1<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc1=obj.avgHeadNum;
					}
					else if(sumd1<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd1=obj.avgHeadNum;
					}
					else if(sume1<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume1=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=2&&parseInt(obj.startTime)<4){
					
					if(suma2<obj.avgHeadNum&&obj.site=="校园大门"){
						suma2=obj.avgHeadNum;
					}
					else if(sumb2<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb2=obj.avgHeadNum;
					}
					else if(sumc2<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc2=obj.avgHeadNum;
					}
					else if(sumd2<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd2=obj.avgHeadNum;
					}
					else if(sume2<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume2=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=4&&parseInt(obj.startTime)<6){
					
					if(suma3<obj.avgHeadNum&&obj.site=="校园大门"){
						suma3=obj.avgHeadNum;
					}
					else if(sumb3<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb3=obj.avgHeadNum;
					}
					else if(sumc3<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc3=obj.avgHeadNum;
					}
					else if(sumd3<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd3=obj.avgHeadNum;
					}
					else if(sume3<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume3=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=6&&parseInt(obj.startTime)<8){
					
					if(suma4<obj.avgHeadNum&&obj.site=="校园大门"){
						suma4=obj.avgHeadNum;
					}
					else if(sumb4<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb4=obj.avgHeadNum;
					}
					else if(sumc4<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc4=obj.avgHeadNum;
					}
					else if(sumd4<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd4=obj.avgHeadNum;
					}
					else if(sume4<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume4=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=8&&parseInt(obj.startTime)<10){
					
					if(suma5<obj.avgHeadNum&&obj.site=="校园大门"){
						suma5=obj.avgHeadNum;
					}
					else if(sumb5<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb5=obj.avgHeadNum;
					}
					else if(sumc5<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc5=obj.avgHeadNum;
					}
					else if(sumd5<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd5=obj.avgHeadNum;
					}
					else if(sume5<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume5=obj.avgHeadNum;
					}
				}
				
				else if(parseInt(obj.startTime)>=10&&parseInt(obj.startTime)<12){
					
					if(suma6<obj.avgHeadNum&&obj.site=="校园大门"){
						suma6=obj.avgHeadNum;
					}
					else if(sumb6<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb6=obj.avgHeadNum;
					}
					else if(sumc6<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc6=obj.avgHeadNum;
					}
					else if(sumd6<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd6=obj.avgHeadNum;
					}
					else if(sume6<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume6=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=12&&parseInt(obj.startTime)<14){
					
					if(suma7<obj.avgHeadNum&&obj.site=="校园大门"){
						suma7=obj.avgHeadNum;
					}
					else if(sumb7<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb7=obj.avgHeadNum;
					}
					else if(sumc7<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc7=obj.avgHeadNum;
					}
					else if(sumd7<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd7=obj.avgHeadNum;
					}
					else if(sume7<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume7=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=14&&parseInt(obj.startTime)<16){
					
					if(suma8<obj.avgHeadNum&&obj.site=="校园大门"){
						suma8=obj.avgHeadNum;
					}
					else if(sumb8<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb8=obj.avgHeadNum;
					}
					else if(sumc8<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc8=obj.avgHeadNum;
					}
					else if(sumd8<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd8=obj.avgHeadNum;
					}
					else if(sume8<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume8=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=16&&parseInt(obj.startTime)<18){
					
					if(suma9<obj.avgHeadNum&&obj.site=="校园大门"){
						suma9=obj.avgHeadNum;
					}
					else if(sumb9<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb9=obj.avgHeadNum;
					}
					else if(sumc9<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc9=obj.avgHeadNum;
					}
					else if(sumd9<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd9=obj.avgHeadNum;
					}
					else if(sume9<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume9=obj.avgHeadNum;
					}
				}
				
				else if(parseInt(obj.startTime)>=18&&parseInt(obj.startTime)<20){
					
					if(suma10<obj.avgHeadNum&&obj.site=="校园大门"){
						suma10=obj.avgHeadNum;
					}
					else if(sumb10<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb10=obj.avgHeadNum;
					}
					else if(sumc10<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc10=obj.avgHeadNum;
					}
					else if(sumd10<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd10=obj.avgHeadNum;
					}
					else if(sume10<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume10=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=20&&parseInt(obj.startTime)<22){
					
					if(suma11<obj.avgHeadNum&&obj.site=="校园大门"){
						suma11=obj.avgHeadNum;
					}
					else if(sumb11<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb11=obj.avgHeadNum;
					}
					else if(sumc11<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc11=obj.avgHeadNum;
					}
					else if(sumd11<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd11=obj.avgHeadNum;
					}
					else if(sume11<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume11=obj.avgHeadNum;
					}
				}
				else if(parseInt(obj.startTime)>=22&&parseInt(obj.startTime)<24){
					
					if(suma12<obj.avgHeadNum&&obj.site=="校园大门"){
						suma12=obj.avgHeadNum;
					}
					else if(sumb12<obj.avgHeadNum&&obj.site=="学校食堂"){
						sumb12=obj.avgHeadNum;
					}
					else if(sumc12<obj.avgHeadNum&&obj.site=="大型商超"){
						sumc12=obj.avgHeadNum;
					}
					else if(sumd12<obj.avgHeadNum&&obj.site=="政府大门"){
						sumd12=obj.avgHeadNum;
					}
					else if(sume12<obj.avgHeadNum&&obj.site=="交通枢纽"){
						sume12=obj.avgHeadNum;
					}
				}
				
				
			
			});
			//加入数据
				data.push(
					{name:"00:00~02:00",y:suma1+sumb1+sumc1+sumd1+sume1},
					{name:"02:00~04:00",y:suma2+sumb2+sumc2+sumd2+sume2},
					{name:"04:00~06:00",y:suma3+sumb3+sumc3+sumd3+sume3},
					{name:"06:00~08:00",y:suma4+sumb4+sumc4+sumd4+sume4},
					{name:"08:00~10:00",y:suma5+sumb5+sumc5+sumd5+sume5},
					{name:"10:00~12:00",y:suma6+sumb6+sumc6+sumd6+sume6},					
					{name:"12:00~14:00",y:suma7+sumb7+sumc7+sumd7+sume7},
					{name:"14:00~16:00",y:suma8+sumb8+sumc8+sumd8+sume8},
					{name:"16:00~18:00",y:suma9+sumb9+sumc9+sumd9+sume9},
					{name:"18:00~20:00",y:suma10+sumb10+sumc10+sumd10+sume10},
					{name:"20:00~22:00",y:suma11+sumb11+sumc11+sumd11+sume11},
					{name:"22:00~24:00",y:suma12+sumb12+sumc12+sumd12+sume12}
				);

			options.series[0].data = data;
			chart = new Highcharts.Chart(options);
		}
	});
	//定时器，每分钟访问一次column()函数
	setTimeout("column()",60000);
	}

在这里插入图片描述

3、Highcharts

Highcharts API文档

Highcharts.js下载地址

Highcharts提供CDN 服务，在下载界面可见详细描述
jQuery下载

贰货不二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highcharts之实时柱状图

1、导入highcharts.js和jQuery.js2、Html代码和js代码//container2为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用<div id="container2" style="width:380px;height:230px;margin:0 auto;padding-top: 10px"> </div>$(f...
复制链接

扫一扫