现在接到一个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>
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>
解决方案 »
- 为什么用ajax传值后画面还是刷新呢
- 请教:这样写函数并直接调用有什么好处?(function(){alert('hi');})();
- JS弹出模式窗体 大小问题!
- 如何解决js文件重复加载的问题
- 为什么我这段JS代码看不到输出
- DIV的替换问题
- 我把17173下载站首页按字母选游戏那个弄到自己机器上面读取代码到首页出来中文是乱码,请问怎么搞``?
- 动态下拉菜单被下面的frame遮盖住的问题
- 关于三角函数的问题 一个三百年前已忘得一干二净的问题
- 还是<input type=file>问题,怎么不让提交
- jquery操作IFRAME的问题 急啊,大家帮帮忙
- 求前端高手。。。浏览器视图缩小的时候怎样也使它的字体缩小????
不知道怎么弄,但是在网上找了个ajax的方法实现动态图的例子
http://blog.csdn.net/softwave/article/details/6963831