第一次用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. 英语笔记3(git)

    备注 一: Staging Modified Files Let’s change a file that was already tracked. (tracked 表示该文件已经被git管理过,再 ...

  2. 【Spark篇】---Spark初始

    一.前述 Spark是基于内存的计算框架,性能要优于Mapreduce,可以实现hadoop生态圈中的多个组件,是一个非常优秀的大数据框架,是Apache的顶级项目.One stack  rule  ...

  3. child_process 子进程

    创建子进程,使其可以在进程中执行操作,应用系统命令等.nodejs创建子进程有四种方法,分别是spawn,fork,exec,execFile. 区别 : 格式 : spawn和execFile的格式 ...

  4. C++版 - HDUoj 2010 3阶的水仙花数 - 牛客网

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C++版 - ...

  5. Android中颜色透明度对应16进制值

    透明度百分比对应的十六进制: (说明:百分比计算出来会有小数,按照常规的四舍五入处理,详情请往下查看) 百分比:0% HEX: 00 百分比:1% HEX: 30 百分比:2% HEX: 50 百分比 ...

  6. Java开发知识之Java中的Map结构

    Java开发知识之Java中的Map结构 一丶Map接口 Map没有实现Collection接口,提供的是Key 到Value的映射. Map中.不能包含相同的Key,每个Key只能映射一个Value ...

  7. jumpserver篇--安装

    参考:https://github.com/jumpserver/jumpserver/wiki/%E5%AE%89%E8%A3%85%E5%9B%BE%E8%A7%A3 服务器环境: ip:192. ...

  8. GITHup的使用

    一个源码管理工具,由于不擅长敲GIt命令,还不太喜欢用英文版本的软件,所以想办法用中文版的图形工具步骤如下: 下载了GIT64位,安装,下载了TortoiseGit和TortoiseGit中文语言包, ...

  9. Scrapy-Redis分布式爬虫常规操作

    一.X-path 的常规用法1./是从根节点选取,有顺序2.//从当前节点选择文档中的节点,无顺序3..选取当前节点4...选取当前节点的父节点5.@选取属性6. //div[@class='docl ...

  10. php 日期时间类型带毫秒

    <?php date_default_timezone_set('PRC'); $mtimestamp = sprintf("%.3f", microtime(true)); ...