Highcharts关于散点图数据X轴为时间轴问题及固定显示24小时

最近几天自己运用Highcharts的散点图制作一个图表,数据以时间为x轴;
由于图表很多,为了有直观的对比,我打算吧x轴24小时全部固定显示;

js代码如下:
从后台获取数组并循环

 	var alldata = [];
    var alldata2 = [];
    var alldata3 = [];
    var ajlb = "数据1";
    $.ajax({
        type : "post",
        url : "${ctx}/url1/getSJ1?year1="+year1+"&year2="+year2+"&year3="+year3+"&ajlb="+ajlb,
        dataType : 'json',
        async : false,
        success : function(data) {
                var pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2}(\d{2})/;
            	for(i=0;i<data.length;i++){
                	var tm=data[i][0];//tm应该是字符串类型
                	var formatedDate1 = tm.replace(pattern, '$1/$2/$3 $4:$5:$6');
                	var someDate = new Date(formatedDate1);//把字符串类型专程Date类型
                	var tms=Date.UTC(0, 0, 0, someDate.getHours(),someDate.getMinutes());//进行Date.UTC处理
                	var ydata=parseInt(data[i][1]);
                	//因为根据年份分为三组图表,所以根据年份分三次
                	if(data[i][2]==year1){
                    	alldata.push([tms,ydata]);
                	}else if(data[i][2]==year2){
                    	alldata2.push([tms,ydata]);
                	}else if(data[i][2]==year3){
                    	alldata3.push([tms,ydata]);
                	}
                
            	}
        	},
        error : function() {
            art.dialog.alert("加载数据失败!");
        }
    })

这是插件的js

Highcharts.chart('ajlb-sjtz-dq02', {
       chart: {
           type: 'scatter',
           zoomType: 'xy'
       },
       title: {
           text: year2
       },
       exporting: {
               enabled:false,
       },
           credits: {
             enabled:false,
       },
       xAxis: {
           type: 'datetime',   //X轴配置为时间轴
           //因为我只需要时间无视年份所以年月日为0,配置起始和结束便可以固定显示24小时
           //需要调整间隔或个数的可以增加间隔参数配置
           min:Date.UTC(0,0,0,0,0),  //设置X轴起始时间
           max:Date.UTC(0,0,0,24,0), //设置X轴结束时间
           title: {
               enabled: true,
               text: '时间点'
           },
           //时间格式
           dateTimeLabelFormats: {
               hour: '%H:%M',
           },
           tickInterval:   3600 * 1000,
       },
       yAxis: {
           title: {
               text: 'y'
           }
       },
       plotOptions: {
           scatter: {
               marker: {
                   radius: 5,
                   states: {
                       hover: {
                           enabled: true,
                           lineColor: 'rgb(100,100,100)'
                       }
                   }
               },
               states: {
                   hover: {
                       marker: {
                           enabled: false
                       }
                   }
               },
               //提示框配置
               tooltip: {
                    pointFormatter: function() {
                       var xx = this.x;
                       //时间转换,我发现data.UTC的时间转换过来维GMT时间,所以再换回,格式化并获取时间段
                       var time = new Date(xx).toUTCString();
                       var nowTime = new Date(time);
                       var commonTime = nowTime.getUTCHours()+":"+ nowTime.getUTCMinutes() ;
                       //返回需要显示的格式
                       return commonTime+' , '+this.y;
                   }  
               }
           }
       },
       series: [{
           name: '数据1',
           color: 'rgba(223, 83, 83, .5)',
           //数据
           data: alldata2
       }] });

本人是个萌新,代码肯定存在很多问题,dalao看了别见笑,请直接批评

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值