您的位置:首页 > 其它

整理higcharts使用时基本配置

2019-08-07 07:31 1231 查看
使用higchats时要注意如果是时间的话要处理higcharts处理时间戳的时候启用的utc时间,不然显示时间会少8个小时
详情看:https://my.oschina.net/u/3774949/blog/3084298
var chart = Highcharts.chart('net', {
title: {
text: ''//higchatrs的标题,不能不写默认显示
},
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'
}
},
yAxis: {
min: 0,//数据从0开始,//数据从0开始
minRange: 1,//当数据为0时显示在最下面
title : {
text : ''//y轴说明,不写为默认值
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
legend: {
verticalAlign : 'top',//多折线时折线信息显示位置
borderWidth : 0
},
plotOptions : {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2//折线点大小
},
lineWidth: 1,//折线粗细
states: {
hover: {//鼠标悬浮时折线样式
lineWidth: 1
}
},
threshold: null
},
series: {
// 针对所有数据列有效
lineWidth: 1
}
},
tooltip: {
formatter:function () {//自定义鼠标悬浮提示气泡
var self= this;
var dateTime= new Date(self.x);//time为时间戳
var date= changedate(dateTime);
var tool = self.series.name+"<br/>" + date + "<br/>" + this.y;
return tool;
}
},
series: [{
name: 'zhagnsan',
data:systemInfo[1],
color:'#7cb5ec'
}, {
name: 'lisi',
data:systemInfo[2],
color:'#24E9EC'
},{
name: 'wangwu',
data:systemInfo[3],
color:'#90ed7d'
},{
name: 'zhaoliu',
data:systemInfo[4],
color:'#f7a35c'
}]
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: