我要评论第一次用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();
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论