最近要做一些前台的数据展示, 用到了HighCharts.我这次做的是趋势图,涉及到动态刷新,因为涉及到了动态刷新,为了便于记忆,在这里记录一下。
在Highcharts中文网上有相应的演示demo,一般你所需要的图的样式都可以找到。可以在demo基础上进行修改。
附Highcharts中文网:http://www.hcharts.cn/demo/index.php
首先,是引入HIghcharts绘图相关的js文件和jQuery.js。
接下来,把HIghcharts动态刷新的格式拷贝并作修改:
var chart;
$(document).ready(
function() {
Highcharts.setOptions({
global : {
useUTC : false
}
});
chart = new Highcharts.Chart({
chart : {
renderTo : 'container', //图表放置的容器,DIV
defaultSeriesType : 'spline', //图表类型为曲线图
events : {
load : function() {
var series = this.series;
setInterval(function() {
$.ajax({
type: "POST",
url: "cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置
success: function(result){
results = eval("(" + result + ")");
var size = results.length;
for(var i