使用canvas实现数据可视化
生活随笔
收集整理的這篇文章主要介紹了
使用canvas实现数据可视化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用canvas實現數據可視化
繪制折線圖
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>canvas {border: 1px solid red;} </style> </head> <body> <canvas id="cas" width="600" height="300"></canvas> </body> <script> var cas=document.getElementById("cas"); var context=cas.getContext('2d');var points=[{x:2,y:97},{x:18,y:27},{x:21,y:62},{x:28,y:44},{x:44,y:83},{x:61,y:88},{x:72,y:45},{x:78,y:72},{x:84,y:53},{x:90,y:42} ]; //定義變量 var leftOffset=20,rightOffset=20,topOffset=20,bottomOffset=20;//箭頭大小 var arrowHeight=20,arrowWidth=10;//坐標軸原點 var x=leftOffset; var y=cas.height-bottomOffset;//繪制坐標軸 context.beginPath(); //繪制x軸 context.moveTo(x,y); context.lineTo(cas.width-rightOffset,y); //繪制y軸 context.moveTo(x,y); context.lineTo(x,topOffset); context.stroke();//繪制箭頭 context.beginPath(); //繪制x軸箭頭 context.moveTo(cas.width-rightOffset,y); context.lineTo(cas.width-rightOffset-arrowHeight,y-arrowWidth/2); context.lineTo(cas.width-rightOffset-arrowHeight/2,y); context.lineTo(cas.width-rightOffset-arrowHeight,y+arrowWidth/2); context.closePath();//繪制y軸箭頭 context.moveTo(x,topOffset); context.lineTo(x-arrowWidth/2,topOffset+arrowHeight); context.lineTo(x,topOffset+arrowHeight/2); context.lineTo(x+arrowWidth/2,topOffset+arrowHeight); context.closePath(); context.fill();//繪制點 context.beginPath(); //范圍 var rangeWidth=cas.width-leftOffset-rightOffset-arrowHeight; var rangeHeight=cas.height-topOffset-bottomOffset-arrowHeight;var maxX=Math.max.apply(null,points.map(function(v){return v.x;} )); var maxY=Math.max.apply(null,points.map(function(v){return v.y;} )); //比例 var rateX=rangeWidth/maxX; var rateY=rangeHeight/maxY;for(var i=0;i<points.length;i++){var pointx=x+points[i].x*rateX;var pointY=y-points[i].y*rateY;context.moveTo(pointx-4,pointY-4);context.lineTo(pointx+4,pointY-4);context.lineTo(pointx+4,pointY+4);context.lineTo(pointx-4,pointY+4);context.closePath(); } context.fillStyle="red"; context.fill();//繪制折線 context.beginPath(); context.moveTo(x+points[0].x*rateX,pointY=y-points[0].y*rateY) for(var i=1;i<points.length;i++){var pointx=x+points[i].x*rateX;var pointY=y-points[i].y*rateY;context.lineTo(pointx,pointY); } context.strokeStyle="red"; context.stroke(); //繪制坐標 for(var i=0;i<points.length;i++){var pointX = x + points[ i ].x * rateX;var pointY = y - points[ i ].y * rateY;var text="("+points[i].x+","+points[i].y+")";context.fillText(text,pointX,pointY); } </script> </html>效果圖
繪制條形圖
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>canvas {border: 1px solid red;} </style> </head> <body> <canvas id="cas" width="600" height="300"></canvas> </body> <script> var cas=document.getElementById("cas"); var context=cas.getContext('2d');var points=[{x:50,y:97},{x:100,y:27},{x:150,y:62},{x:200,y:44},{x:250,y:83},{x:300,y:88},{x:350,y:45},{x:400,y:72},{x:450,y:53},{x:500,y:42} ]; var data=[50,100,150,200,250,300,350,400,450,500];//定義變量 var leftOffset=20,rightOffset=20,topOffset=20,bottomOffset=20;//箭頭大小 var arrowHeight=20,arrowWidth=10;//坐標軸原點 var x=leftOffset; var y=cas.height-bottomOffset;//繪制坐標軸 context.beginPath(); //繪制x軸 context.moveTo(x,y); context.lineTo(cas.width-rightOffset,y); //繪制y軸 context.moveTo(x,y); context.lineTo(x,topOffset); context.stroke();//繪制箭頭 context.beginPath(); //繪制x軸箭頭 context.moveTo(cas.width-rightOffset,y); context.lineTo(cas.width-rightOffset-arrowHeight,y-arrowWidth/2); context.lineTo(cas.width-rightOffset-arrowHeight/2,y); context.lineTo(cas.width-rightOffset-arrowHeight,y+arrowWidth/2); context.closePath();//繪制y軸箭頭 context.moveTo(x,topOffset); context.lineTo(x-arrowWidth/2,topOffset+arrowHeight); context.lineTo(x,topOffset+arrowHeight/2); context.lineTo(x+arrowWidth/2,topOffset+arrowHeight); context.closePath(); context.fill();//繪制點 context.beginPath(); //范圍 var rangeHeight=cas.height-topOffset-bottomOffset-arrowHeight;var maxY=Math.max.apply(null,points.map(function(v){return v.y;} )); //比例 var rateY=rangeHeight/maxY; context.fillStyle="red"; context.fill(); //繪制折線 context.beginPath(); for(var i=0;i<points.length;i++){var pointY=y-points[i].y*rateY;context.moveTo(points[i].x-6,pointY-6);context.lineTo(points[i].x+6,pointY-6);context.lineTo(points[i].x+6,y);context.lineTo(points[i].x-6,y);context.closePath();context.fillText(points[i].y,points[i].x-6,pointY-8); } context.fillStyle="red"; context.fill();轉載于:https://www.cnblogs.com/yayazhang/p/6041274.html
總結
以上是生活随笔為你收集整理的使用canvas实现数据可视化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 济南学习 Day2 T2 am
- 下一篇： codevs 2865 天平系统1