Highcharts入坑记
程序员文章站
2022-08-05 21:37:03
第一次用Highcharts画一个温度湿度变化的图片,因为不熟悉跳了好多坑,特记录下: 一、JS引用 二、添加图表的容器 三、设置Highcharts的汉化,和不使用UTC时间,在这里折腾时间够久,一把泪 三、初始化Highcharts 关键点: A、因为Highcharts使用的是UTC时间会导致 ......
第一次用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();
上一篇: 拖动条/滑动条控件、星级评分控件