您的位置：首页 > 其它

HighCharts动态数据刷新

2015-03-26 10:01 176 查看

最近项目用到制表的功能，也就接触到了HighCharts这个工具。说是工具，其实我个人感觉他就是一个第三方的包而已。如果单机使用就得下好她的包然后引用本队路径，如果想用网络的话就用

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

引用如上两行。具体怎么用HighCharts表大家可以上官网查看http://www.hcharts.cn/docs/index.php。我这里只是写一个从外部导入一个json文件生成数据制成图表的demo，大家可以把它演变成后台传送实时数据，前台表格动态刷新的功能。直接上代码了：

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<body>
	<div id="container"></div>
	<script>
	$(document).ready(function() { 
		method();
	}); 
	
	function method() {
		var chart; 
		$('#container').highcharts({ 
			chart : { 
				type : 'spline', 
				animation : Highcharts.svg, // don't animate in old IE 
				marginRight : 10,
			}, 
			title : { 
				text : 'Live random data' 
			}, 
			xAxis : {
				tickPixelInterval : 150 
			}, 
			yAxis : { 
				title : { 
					text : 'Value' 
				}, 
				plotLines : [{ 
					value : 0, 
					width : 1, 
					color : '#808080' 
				}] 
			}, 

			legend : { 
				enabled : false 
			}, 
			exporting : { 
				enabled : false 
			}, 
			series : [{ 
				name : 'Random data', 
				data : (function() { 
					var data = [], 
					i; 
					$.ajax({
						type : "POST",
						url : "data.json",
						async : false, // 很关键默认情况下是异步的 所以必须加上这个参数把它设置为false；
						dataType : "json",
						success : function(json){	 
							for (i = 0; i <json.valueList.length; i++) { 
								data.push({ 
									x : i, 
									y : json.valueList[i] 
								}); 
							}
						},
						error : function(result) {
							alert("json got problem from the file");
						}
					}); 
					return data; 
				})() 
			}] 
		});
	}
	</script>
</body>
</html>

【注】：data.json是我跟本html页面同目录下面的一个json文件，详细：{"valueList":[1,2,3,4]}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航