Highcharts例子,X轴为不连续时间

1.引入 js文件

  <script type="text/javascript" src="${ctx}/static/comp/highcharts/highcharts.js" ></script>

2.代码:

   

Highcharts.setOptions({ global: { useUTC: false } });   
var chart;
/*
 containerId为容器id,data为时间点数据格式为:
[{name:'333',data:[[1431288610000,9],[1431292210000,40],[1431295810000,9],[1431375010000,20],[1431378610000,30],[1431382210000,10]]},{name:'12312312',data:[[1431385810000,20],[1431389410000,30],[1431457810000,90],[1431461410000,90],[1431465010000,50],[1431468610000,10],[1431479410000,40]]}]解释:数据为时间点数据,没一点的x轴为时间毫秒数,y轴为数据值
*/
function createHighcharts(containerId,data){
	
       chart = new Highcharts.Chart({
	        chart: {
	            renderTo:containerId,
	            type: 'spline',
	            zoomType: 'x'
	        },
	        title: {
	            text: '剂量数据及变化曲线'
	        },
	        /*subtitle: {
	            text: 'Irregular time data in Highcharts JS'
	        },
	         */
	        xAxis: {
	        	  type: 'datetime',
                      /*
	              dateTimeLabelFormats: {
	                hour: '%H:%M'
	              }
                     */
	            
                labels: {  
                    step: 2,
                    formatter: function () {  
                        return Highcharts.dateFormat('%Y-%m-%d', this.value);  
                    }  
                }  
	           
	        },
	        yAxis: {
	            title: {
	                text: '剂量值(uSv/h)'
	            },
	            min: 0
	        },
	        tooltip: {
	            formatter: function() {
	                    return '<b>'+ this.series.name +'</b><br>'+
	                    Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y +' (uSv/h)';
	            }
	        },
	        exporting : {
				enabled : false
			},
			plotOptions: {
	            series: {
	                pointInterval:  3600 * 1000 
	            }
	        },
	        series:data
	    });
	
}

 注意事项:

 1.Highcharts.setOptions({ global: { useUTC: false } });  这句为 设置highcharts时间格式 不为UTC时间,如果不设置 会出现 前台显示时间和后台 时间差8小时的状况。

 2.后台的数据时间点要升序排序,否则在鼠标移动时 HighCharts Tooltip是只能显示第一和最后一点的提示信息

3.在前端如果曲线多的时候或者重复画曲线的时候,要调用chart.destroy();在从新创建新的曲线

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Highcharts提供了自带的双X轴展示方式,但是效果可能不太理想,调整起来也会比较麻烦。不过,你可以使用Highcharts的分组插件grouped-categories.js来实现想要的效果。你可以稍作修改,将你的代码中的xAxis部分替换为以下代码来实现x轴的分组: xAxis: { categories: \[{ name: '2011年', categories: \['一', '二', '三'\] }, { name: '2012年', categories: \['一', '二', '三'\] }, { name: '2013年', categories: \['一', '二', '三'\] }\] } 这样,你的x轴就会按照年份进行分组显示。希望对你有帮助!\[1\] \[2\] #### 引用[.reference_title] - *1* [hightChart 实现x轴分组](https://blog.csdn.net/yuanfanlove/article/details/121969552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Highcharts:X轴分组堆叠图](https://blog.csdn.net/yueritian/article/details/41309137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Highcharts实现X轴分组分类](https://blog.csdn.net/qq_40585267/article/details/104896165)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值