Highcharts之动态刷新——结合后台数据

最新推荐文章于 2024-03-21 17:04:36 发布

Everyday都不同

最新推荐文章于 2024-03-21 17:04:36 发布

阅读量1.8k

点赞数

分类专栏： Highcharts 动态刷新 ajax 后台数据交互

本文链接：https://blog.csdn.net/qq_18875541/article/details/69391120

版权

本文介绍了如何在实际开发中结合后台数据动态刷新Highcharts图表，重点讲解了设置`global.useUTC: false`以避免时区问题，以及如何定义chart的event属性和series属性来动态获取和展示数据。同时提到了xAxis的tickInterval属性和处理Highcharts Errors #19的方法。文章还分享了创建和刷新数据的js函数实现。

摘要由CSDN通过智能技术生成

【若要转载请标明出处 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: