<html>

< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < title >动态统计图表 </ title >
</ head >

< body >

< div  style ="text-align:center;" >
     < canvas  id ="testCanvas"  width ="1024"  height ="300"  style ="border:1px solid #1111AA;" ></ canvas >
     < div >动态统计图表 </ div >
</ div >

< script  type ="text/javascript" >
var canvas = document.getElementById('testCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineJoin = 'bevel';
ctx.miterLimit = 5;


function changeFun() {
    ctx.clearRect(0, 0, 1024, 300);
    ctx.beginPath();
     var arr = [];
     for( var i=0; i< 30; i++ )
    {
         var random = Math.random();
        random = parseInt(random * 100 % 100 + 1);
        arr.push(random);
    }

     var x = 0;
     for( var i=0; i< 30; i++ )
    {
         var y = arr[i]+50;
            
        ctx.lineTo(x, y);

        ctx.fillText(x+','+100, x-3, y);
        ctx.moveTo(x, y);
        x = x + 35;
    }
    ctx.stroke();
};

setInterval(changeFun,1000);
</ script >
</ body >

</html>