现在接到一个Demo,就是在html页面中演示线形图,并且使其动态改变。求指教$(document).ready(function(){
var a = new Array(new Array('4/3/2012,54','4/15/2012,43','4/28/2012,60','5/2/2012,81'),
new Array('4/3/2012,34','4/15/2012,53','4/28/2012,40','5/2/2012,61'));



    line1 = [['已用内存', 3], ['可用内存', 7]]; 
line2 = [['已用磁盘', 3], ['可用磁盘', 7]];    
 
    plot1 = $.jqplot('chart1', [line1], {    
        title:'内存占用率 ',//设置饼状图的标题    
        seriesDefaults: {   
            fill: true,    
            showMarker: false,    
            shadow: false,    
            renderer:$.jqplot.PieRenderer,    
            rendererOptions:{ 
showDataLabels:true, //设置饼状图上显示的数据  
                diameter: undefined, // 设置饼的直径    
                padding: 10, // 饼距离其分类名称框或者图表边框的距离,变相该表饼的直径    
                sliceMargin: 4, // 饼的每个部分之间的距离    
                fill:true, // 设置饼的每部分被填充的状态    
                shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果    
                shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离    
                shadowDepth: 5, // 设置阴影区域的深度    
                shadowAlpha: 0.07 // 设置阴影区域的透明度    
            }    
        },    
        legend:{    
            show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置)    
            location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.    
            xoffset: 12, // 分类名称框距图表区域上边框的距离(单位px)    
            yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px)    
        } 
})  
 plot2 = $.jqplot('chart2', [line2], {    
        title:'硬盘占用率 ',//设置饼状图的标题    
        seriesDefaults: {   
            fill: true,    
            showMarker: false,    
            shadow: false,    
            renderer:$.jqplot.PieRenderer,    
            rendererOptions:{  
showDataLabels:true,   
                diameter: undefined, // 设置饼的直径    
                padding: 10, // 饼距离其分类名称框或者图表边框的距离,变相该表饼的直径    
                sliceMargin: 4, // 饼的每个部分之间的距离    
                fill:true, // 设置饼的每部分被填充的状态    
                shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果    
                shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离    
                shadowDepth: 5, // 设置阴影区域的深度    
                shadowAlpha: 0.07 // 设置阴影区域的透明度    
            }    
        },    
        legend:{    
            show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置)    
            location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.    
            xoffset: 12, // 分类名称框距图表区域上边框的距离(单位px)    
            yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px)    
        } 
}) 

var i=0;
var line = [['4/3/2012', 54], ['4/15/2012', 43], ['4/28/2012', 60], ['5/2/2012', 81]];
setInterval(function(){
if(i==0){
var list1 =  a[0][0].split(",");
var list2 = a[0][1].split(",");
var list3 = a[0][2].split(",");
var list4 = a[0][3].split(",");
line = "[['"+list1[0]+"',"+list1[1]+"],['"+list2[0]+"',"+list2[1]+"],['"+list3[0]+"',"+list3[1]+"],['"+list4[0]+"',"+list4[1]+"]]";

alert(line);


}

if(i==1){
var list1 =  a[1][0].split(",");
var list2 = a[1][1].split(",");
var list3 = a[1][2].split(",");
var list4 = a[1][3].split(",");
line = "[['"+list1[0]+"',"+list1[1]+"],['"+list2[0]+"',"+list2[1]+"],['"+list3[0]+"',"+list3[1]+"],['"+list4[0]+"',"+list4[1]+"]]";

alert(line);
}

i++;

if(i>a.length-1){
i = 0;
}
},2000);

var plot2 = $.jqplot('chart3', [line], {      
axes: {        
xaxis: {          
renderer: $.jqplot.DateAxisRenderer,          
label: '时间',          
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,          
tickRenderer: $.jqplot.CanvasAxisTickRenderer,          
tickOptions: {  
angle:15                 
}      
} ,
yaxis:{
label:'CPU使用率(%)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer  
}
}   
});







});    </script>