整理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' }] });
相关文章推荐
- Druid基本配置及内置监控使用_动力节点Java学院整理
- Log4j使用基本配置
- [整理]新装的windows server 2003可能需要做的几项基本配置
- vss开发环境基本配置与使用(图解)
- sersync2 完全安装配置说明(一) ----基本功能使用
- 注解的力量 -----Spring 2.5 JPA hibernate 使用方法的点滴整理(五):使用@Component 来简化bean的配置
- emacs常用配置整理及使用
- xml——配置文件的基本使用
- 在Android模拟器中使用google maps的基本配置
- 整理的linux下ntop启动、安装、配置、使用!(转载)
- 注解的力量 -----Spring 2.5 JPA hibernate 使用方法的点滴整理(四):使用 命名空间 简化配置
- android NDK配置和基本使用
- log4Net使用及配置注解(整理)
- Hibernate Search基本配置和使用
- Spring.NET环境搭建和基本API及XML配置笔记整理
- FCKeditor2.6基本配置优化修改使用方法
- FCKeditor基本配置优化修改使用方法
- [注解的力量]Spring 2.5 JPA hibernate 使用方法的点滴整理(五):使用@Component 来简化bean的配置
- 使用Storage Manager 进行磁盘阵列的基本配置