页面展示类似于任务管理器CPU使用记录的动态图

发布于 2021-11-12 21:03:38 字数 4169 浏览 765 评论 2

那个，对于这个问题我没有什么好的思路

最后的方法就是那jqPlot画图

然后使用定时器刷新

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Test</title>

<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="./jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="./plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="./plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" language="javascript">

$(function(){
run();
var i = 1 ;
var n = 1; //加载页面时启动定时器
var interval;
function run() {
interval = setInterval(chat, "1000");
}
function chat() {
if(i>4){
n=0;
}
if(i<1){
n=1;
}
if(n==1){
i++;
}else{
i--;
}

line1 = [[1+i,3+i], [2+i,7+i], [3+i,2+i], [4+i,9+i], [5+i,16+i], [6+i,8+i], [7+i,12+i]];
line2 = [[1,4], [2,5], [3,4], [4,8], [5,13], [6,7], [7,17]];

//详细配置
plot = $.jqplot('chart', [line1,line2], {

title: '一周销量情况', //图表表头标题
axes: {
xaxis: { min: 0, max: 8}, //准确控制x轴最大值及最小值
yaxis: { min: 0, max: 20, numberTicks: 5}, //准确控制y轴最大值及最小值,间隔个数
xaxis: {
ticks:['周日', '周一', '周二', '周三', '周四','周五','周六'],
renderer: $.jqplot.CategoryAxisRenderer
}
},
//series: [{ color: '#5FAB78'}], //定义趋势线颜色
highlighter: {
lineWidthAdjust: 50, //当鼠标移动到放大的数据点上时，设置增大的数据点的宽度,目前仅适用于非实心数据点
sizeAdjust: 10, // 当鼠标移动到数据点上时，数据点扩大的增量增量
showTooltip: true, // 是否显示提示信息栏
tooltipLocation: 'nw', // 提示信息显示位置（英文方向的首写字母）: n, ne, e, se, s, sw, w, nw.
tooltipAxes: 'xy', // 提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式,值分别为 x, y or xy.
tooltipSeparator: ',' // 提示信息栏不同值之间的间隔符号
}
});
}

});
</script>
</head>
<body>
<span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
</body>
</html>
这个就是看看行不行，结果发现