highCharts手指缩放图标踩过的坑

1.官网自带的X轴时间戳是世界时间戳,直接用会有问题

//将时间戳设置为标准时间
	Highcharts.setOptions({
	   global: {
		   useUTC: false 
	   }
	});

2.去掉图标下方官网自带的版权链接

credits : {
	enabled:false//不显示highCharts版权信息
}

html页面中使用:

<div id="container" style="min-width:200px;height:400px;display: none;"></div>
initChart('container',yData1,name1,title1,yData2,name2);

highCharts组件:

//其中id为图表元素对应的id类名,yData1,yData2为两条数据Y轴对应的数据,name1,name2对应的是图例名称,title对应的y轴上方的标题
var chart = null; 
function initChart(id,yData1,name1,title,yData2,name2) {
	//obj1和obj2是series对应的两条数据项配置
	var obj1 = {
		type: 'line',
		name: name1,
		data: yData1,
		color:'#1890FF'
	} 
	var obj2 ={
		type: 'line',
		name: name2,
		data: yData2,
		color:'#91CB74'
	}
	var arr = []
	arr.push(obj1);
	if(yData2!==undefined && yData2!==null){
		arr.push(obj2)
	}
	//将时间设置为标准时间戳
	Highcharts.setOptions({
	   global: {
		   useUTC: false 
	   }
	});
	chart = Highcharts.chart(id, {
		chart: {
			zoomType: 'x',
			panning: true,
			panKey: 'shift',
			resetZoomButton:{
				position: {
					x: 0,
					y: -30
				}
			}
		},
		//去掉图表下面的版权链接
		credits : {
			enabled:false//不显示highCharts版权信息
		},
		exporting: {
			enabled:false ,
		},
		title: {
			text: title,
			align:'left',
			style:{
				fontSize: '12px'
			}
		},
		// subtitle: {
		// 	text: document.ontouchstart === undefined ?
		// 	'鼠标拖动可以进行缩放' : '手势操作进行缩放'
		// },
		xAxis: {
			type: 'datetime',
			dateTimeLabelFormats: {
				millisecond: '%H:%M:%S.%L',
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%H:%M',
				day: '%m-%d',
				week: '%m-%d',
				month: '%Y-%m',
				year: '%Y'
			},
			
		},
		tooltip: {
			dateTimeLabelFormats: {
				millisecond: '%H:%M:%S.%L',
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%H:%M',
				day: '%Y-%m-%d',
				week: '%m-%d',
				month: '%Y-%m',
				year: '%Y'
			},
			xDateFormat: '%Y-%m-%d %H:%M:%S',
		},
		yAxis: {
			title: {
				text: null
			},
			gridLineDashStyle:"Dash",
			tickInterval:5,
		},
		legend: {
			enabled: true,
			itemStyle:{
				 cursor: 'pointer'
			}
		},
		plotOptions: {
			area: {
				fillColor: {
					linearGradient: {
						x1: 0,
						y1: 0,
						x2: 0,
						y2: 1
					},
					stops: [
						[0, new Highcharts.getOptions().colors[0]],
						[1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
					]
				},
				marker: {
					radius: 2
				},
				lineWidth: 1,
				states: {
					hover: {
						lineWidth: 1
					}
				},
				threshold: null
			}
		},
		series: arr
	});
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值