HighCharts动态数据刷新
最近项目用到制表的功能，也就接触到了HighCharts这个工具。说是工具，其实我个人感觉他就是一个第三方的包而已。如果单机使用就得下好她的包然后引用本队路径，如果想用网络的话就用
【注】：data.json是我跟本html页面同目录下面的一个json文件，详细：{"valueList":[1,2,3,4]}
<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]}