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
});
};