【若要转载 请标明出处 http://raising.iteye.com/blog/2214779】
最近要求做前台的一些东西,用到了Highcharts。。其实在Highcharts中文网上有相应的演示demo,一般你所需要的图的样式都可以找到。难点在于实际开发中,需要的数据往往是要结合后台请求并响应的数据的。
附Highcharts中文网:
http://www.hcharts.cn/demo/index.php
而我这次做的是趋势图,涉及到动态刷新,做的过程还是花了一番功夫的,也补充和巩固了一点js的知识,为了纪念,把过程记录一下:
首先,是引入HIghcharts绘图相关的js文件和jQuery.js。
接下来,把HIghcharts动态刷新的格式拷贝并作修改:
$(function(){ $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false//是否使用世界标准时间 } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', marginRight: 10, events: { load: function() { var series = this.series; setInterval(function() { var result = reload(); var x = result.time; for(var i=0; i<series.length; i++) { var y = result.y[i]; series[i].addPoint([x, y], true, true); } }, 1000*5); } } }, title: { text: 'ssssss' }, xAxis: { type: 'datetime', tickPixelInterval: 150, tickInterval: 60 * 1000 }, yAxis: { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, //图例属性 legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', borderWidth: 0 }, exporting: { enabled: false }, series: create() }); }); });
注意属性:global: { useUTC: false }是很重要的,对于我们在中国地区使用的系统而言,如果你这个设置为true或者不设置的话,会莫名其妙少了8个小时。因为如果你不设置为false,则是以世界标准时区为准,而由于中国所在时区为+8,所以经过 Highcharts 的处理后会减去8个小时。——这也是会偶尔出现的比较难以发现的问题。。(我就遇到了这个问题,一直在highcharts的dateFormat上找问题,搞了好久才发现这个问题~~~~)
重点是chart里面的event属性,series属性。注意,此时:series属性是一个js函数的返回值,需用“js函数名()”来取得。
而demo里面,series是这样的:
series: [{ name: 'Random data', data: (function() { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; })() }]
这是死数据,并且只显示一条曲线(或折线)。我们需要得到后台数据,并且x,y的值都需要由后台决定。
create()方法的定义如下:
function create() { var series = new Array(); $.ajax({ type: "POST", url: "xxxx/yyyyy.json", async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置 success: function(result){ var ccc = result.key; var size = ccc.length; for(var i=0; i<size; i++) { var name = ccc[i].yyyy; var perTotalCnt = ccc[i].xxxx; var data = function() { var data = [], time = result.time, i; for(i=-6; i<=0; i++) { data.push({ x: aaaa, y: zzzz }); } return data; }(); series.push({"name": name, "data": data}); } } }); alert(series); return series; }
1)其中,series.push({"name": name, "data": data});这一行就是在往series数组[]中push数据,从而生成格式中需要的series数组;
注意series是一个json的数组,哪怕你只有一个series,也是一个长度为1的数组。如:
function create() { var series = {}; series.name = '个数'; series.data = [{'x':1448887500000,'y':50},{'x':1448887620000,'y':30},{'x':1448887680000,'y':31},{'x':1448887740000,'y':20},{'x':1448887800000,'y':20},{'x':1448887860000,'y':33},{'x':1448887920000,'y':39}]; var data = []; data[0] = series; return data; }
2)xAxis的tickInterval: 60 * 1000属性,表明x轴的显示间隔为分钟(单位为ms),前提是你指定xAis的type: 'datetime',这个属性决定了x轴显示的数据格式,如你指定为1分钟时,显示的是20:45,20.46,20:47等,同时也决定了显示的个数;
3)当你指定xAis的type为datetime时,point的x值是long值的毫秒数,表示从1970年01月01日00:00:00:000至今为止的毫秒数。
4)当出现Highcharts Errors #19的错误时,请检查加载时x轴的点个数是否超过999个(最高限制);x轴上的两个点的时间间隔是否太大。
而这一部分:
events: { load: function() { var series = this.series; setInterval(function() { var result = reload(); var x = result.time; for(var i=0; i<series.length; i++) { var y = result.y[i]; series[i].addPoint([x, y], true, true); } }, 1000*5); } }
则是每隔一段时间(1000*5=5s)刷新页面数据,并且通过循环生成多条"曲线"。其中reload()也是一个js函数的返回值:注:定义json对象的方法var json = {"key1": value1, "key2":value2} (reload方法就不贴了,也是通过ajax请求后台,得到相应数据并且处理相应数据后,放到一个数据结构或json对象中)。
其实,highcharts绘制chart也是典型的jquery语法·,所以我们取一个已经存在的highcharts对象时,可以直接用$("#divId").highcharts()即可,这符合Highcharts为对象属性赋值和取值的规则~~~~~~~~
效果(某一时刻):
画图完毕。
相关推荐
java实现的highcharts与ajax结合动态实时获取数据更新图表
HighCharts 图表属性——chart HighCharts 颜色属性——colors HighCharts 版权属性——credits HighCharts 去除版权的几种方法 HighCharts 导出属性——explorting HighCharts HTML标签——labels HighCharts 语言...
highcharts 动态指定 x y数据
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码
highcharts的常用配置,后台数据的交互。数据的下钻,已经导出相关配置,返回按钮配置。堆叠图,加折线图,展示环比增量。包含内容丰富,
highcharts导出图片的后台代码,这样就不用从highcharts官网服务器上进行图片导出了,成了一个本地的服务器!
Highcharts在Java后台导出图片到PDF和EXCEL文件中示例代码,程序放到MyEclipse8.6中编译后可直接放到Tomcat6及以上版本运行,程序中含有jar包,下载后不用操心到处找jar包,在MyEclipse8.6里建立普通的Web工程就可以...
Highcharts提供的Geojson世界地图数据集的国家名称中文翻译,Vue使用Highcharts实现世界地图的详细介绍来自我的另一篇文章,可供参考,有问题可随时联系,感谢支持: ...
highcharts读后台php,生成动态图表.php文件可以根据需要改写,从数据库中读取实时数据.很适合生成动态监控系统或实时交易系统的网页,生成的图表可以毫无问题的在移动设备上显示。
jQuery及highcharts做cpu动态走势图,https://blog.csdn.net/qq_40374604/article/details/83578837,有问题请留言
里面附带例子,易懂易学,欢迎下载。互相交流。
博文《关于highcharts的封装和刷新》中代码.
下面小编就为大家带来一篇动态更新highcharts数据的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇Highcharts 多个Y轴动态刷新数据的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
强大的highcharts 内置php+mysql饼状图动态开发实例 及各种曲线 柱状图 饼状图示例!
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...