第一次用Highcharts画一个温度湿度变化的图片,因为不熟悉跳了好多坑,特记录下:

一、JS引用

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/Highcharts-7.0.3/code/highcharts.js"></script>
<script src="~/Scripts/Highcharts-7.0.3/code/modules/exporting.js"></script>
<script src="~/Scripts/Highcharts-7.0.3/code/modules/data.js"></script>
<script src="~/Scripts/Highcharts-7.0.3/code/modules/series-label.js"></script>
<script src="~/Scripts/Highcharts-7.0.3/code/modules/no-data-to-display.js"></script>

二、添加图表的容器

<div id="container"></div>

三、设置Highcharts的汉化,和不使用UTC时间,在这里折腾时间够久,一把泪

Highcharts.setOptions({
lang: {
noData: '暂无数据',
contextButtonTitle: "图表导出菜单",
decimalPoint: ".",
downloadJPEG: "下载JPEG图片",
downloadPDF: "下载PDF文件",
downloadPNG: "下载PNG文件",
downloadSVG: "下载SVG文件",
drillUpText: "返回 {series.name}",
loading: "加载中",
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
noData: "没有数据",
numericSymbols: ["千", "兆", "G", "T", "P", "E"],
printChart: "打印图表",
resetZoom: "恢复缩放",
resetZoomTitle: "恢复图表",
shortMonths: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
thousandsSep: ",",
weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
},
global: {
useUTC: false
}
});

三、初始化Highcharts

var chart = Highcharts.chart(containerId,
{
credits: {
enabled: false
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
data: {
csv: csvData,
parsed: function(d) {
console.log(d);
},
parseDate: function(d) {
return GetTimestamp(d);
}
},
title: {
text: title
},
xAxis: {
type: 'datetime',
//tickInterval: 12 * 3600 * 1000, // 坐标轴刻度间隔为一星期
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
},
//时间格式化字符
//默认会根据当前的刻度间隔取对应的值,即当刻度间隔为一周时,取 week 值
dateTimeLabelFormats: {
//day: '%H:%M'
day: '%b月.%e日 %H:%M'
}
},
yAxis: [
{ // 第一个 Y 轴,放置在左边(默认在坐标)
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // 第二个坐标轴,放置在右边
linkedTo: 0,
gridLineWidth: 0,
opposite: true, // 通过此参数设置坐标轴显示在对立面
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}
],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true,
// 时间格式化字符
// 默认会根据当前的数据点间隔取对应的值
// 当前图表中数据点间隔为 1天,所以配置 day 值即可
dateTimeLabelFormats: {
second: '%b月.%e日 %H:%M:%S',
minute: '%b月.%e日 %H:%M',
hour: '%b月.%e日 %H:%M',
day: '%b月.%e日',
week: '%b月.%e日 ',
month: '%y年.%b月',
year: '%Y年'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
// 数据点点击事件
// 其中 e 变量为事件对象,this 为当前数据点对象
click: function(e) {
//$('.message').html(Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +
// ':<br/> 值:' +
// this.y);
}
}
},
marker: {
lineWidth: 1
}
}
},
events: {
}
});

关键点:

A、因为Highcharts使用的是UTC时间会导致时间变化对不上,解决办法 全局设置useUTC为false,并且重写 data下属的parseDate 方法,使用moment 把时间转换成时间戳

 data: {
csv: csvData,
parsed: function(d) {
console.log(d);
},
parseDate: function(d) {
return GetTimestamp(d);
}
},
  function GetTimestamp(strDateTime) {
return moment(strDateTime).valueOf();
}

B、因为数据是动态增加的 所以需要获取最新的数据,动态添加到图标里面,我使用的Csv格式的数据,

addPoint第一个参数为数据项,需要转换成时间戳,第一个参数的数组的第二项为值,需要转换为数据类型,我最早就是没有转换,图表画出一段空白...........

多点连续添加,需将第二个参数设置为false,使用redraw函数来一次性重绘

  var lines = item.Csv.split('\r\n');
// 遍历每一行
$.each(lines,
function(lineNo, line) {
if (lineNo !== 0 && line !== "") {
var items = line.split(',');
var time = GetTimestamp(items[0]);
gInchart.series[0].addPoint([time, parseFloat(items[1])], false, false);
gInchart.series[1].addPoint([time, parseFloat(items[2])], false, false);
}
});
gInchart.redraw();

Highcharts入坑记的更多相关文章

  1. Kylo 入坑记

    一.概述 Kylo,作为一个基于 Spark 和 NiFi 的开源数据湖编排框架,解决对数据湖获取.治理.感知和技术支持等诸多问题.Kylo 将数据湖的很多功能自动化,包括数据接入.准备.分析发现.P ...

  2. Hadoop入坑记

    Hadoop入坑记 按照官方给的伪分布式配置 etc/hadoop/core-site.xml: <configuration> <property> <name> ...

  3. Spring Cloud Gateway入坑记

    Spring Cloud Gateway入坑记 前提 最近在做老系统的重构,重构完成后新系统中需要引入一个网关服务,作为新系统和老系统接口的适配和代理.之前,很多网关应用使用的是Spring-Clou ...

  4. conda命令入坑记

    conda命令入坑记 本人使用的软件版本: TypeError: LoadLibrary() argument 1 must be str, not None 网上太多的资料,大多都是在讲path的设 ...

  5. ALS部署Spark集群入坑记

    [Stage 236:> (0 + 0) / 400]17/12/04 09:45:55 ERROR yarn.ApplicationMaster: User class threw excep ...

  6. Day25 前端自学日记——入坑记

    一 学习契机 今年是走出校门的第一个年头,进入了一家还算不错的公司,领着一份还算不错的薪水,在外人眼中,似乎这样已经不错了,只要我努力好好做,前程一片光明.可事实真是这样吗?两份实习经历都指向我应该从 ...

  7. 【netcore入坑记】 .Net core UseRowNumberForPaging 分页报错 SQL Server 2008 R2 EntityFrameworkCore

    异常环境: netcore版本:.Net Core 2.1 efcore版本:Microsoft.EntityFrameworkCore.SqlServer 2.1.1 sql sqlserver 版 ...

  8. gRPC入坑记

    概要 由于gRPC主要是谷歌开发的,由于一些已知的原因,gRPC跑demo还是不那么顺利的.单独写这一篇,主要是gRPC安装过程中的坑太多了,记录下来让大家少走弯路. 主要的坑: 如果使用PHP.Py ...

  9. Jenkins入坑记

    记录一遍Jenkins初级使用教程 一,安装 (操作系统 centerOS7) 1-1.本次使用的是rpm包安装方式,在Jenkins官网下载rpm安装文件 下载地址: https://pkg.jen ...

随机推荐

  1. 【异常】Servlet.service() for servlet [springMvc] in context with path [/orderdishessystem] threw exception [Handler processing failed; nested exception is java.lang.NoClassDefFoundError: net/sf/ezmorph/M

    今天做登录的时候,引入json-lib-2.1-jdk15.jar的包时,执行到JSONObject jsonObject = new JSONObject()对象就报标题的那个错. 原来是除了要导入 ...

  2. 【spring】ApplicationListener传递参数到页面(解决静态+动态资源路径+静态文件的缓存控制)

    一.相对路径还是绝对路径的问题 前端页面加载资源或者请求的时候到底是使用相对路径还是绝对路径,想必大家都很清楚,用的是当然是相对路径,因为这样增加了项目的灵活性,不需要经常的改动.那既然是相对路径就需 ...

  3. 【tiles】简单使用总结

    一.简介 tiles是一种JSP布局框架,主要目的是为了将复杂的JSP页面作为一个页面的部分机能,然后组合成一个最终的页面,这种做法便于对各个页面机能的变更和维护,减少代码量,实现代码的重用. til ...

  4. 10.Git分支-分支管理(git branch命令)、分支开发工作流

    1.分支管理  git branch 不仅可以创建和删除分支,还可以做一些其他工作. 1.不带参数的 git branch ,得到本地仓库当前的分支列表.并且会显示,当期所在的分支,也就是HEAD所指 ...

  5. Google、B站……那些神奇的404页面,你看过多少?

    据说在第三次科技革命之前,互联网的形态就是一个大型的中央数据库,这个数据库就设置在 404 房间里面.那时候所有的请求都是由人工手动完成的,如果在数据库中没有找到请求者所需要的文件,或者由于请求者写错 ...

  6. 汇编语言 实验14 访问CMOS RAM

    汇编语言 访问CMOS RAM CMOS RAM 是什么? 存放计算机开机必备的一些数据的硬件,由BIOS(Basic input/output system)调用其数据. 怎么用? 首先要理解端口的 ...

  7. ORA-01034: ORACLE not available问题

    通过DBCA新建一个数据库后,执行以下命令报错:SQL> shutdown immediate;ERROR:ORA-01034: ORACLE not availableORA-27101: s ...

  8. Java基础10:全面解读Java异常

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  9. 17-Flink消费Kafka写入Mysql

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  10. 深度学习框架Keras介绍及实战

    Keras 是一个用 Python 编写的高级神经网络 API,它能够以 TensorFlow, CNTK, 或者 Theano 作为后端运行.Keras 的开发重点是支持快速的实验.能够以最小的时延 ...