HTML5中canvas画图之绘制数据图表

来源：互联网发布：汽车互联软件编辑：程序博客网时间：2024/06/05 04:26

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下:

实现代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>数据图表</title></head><body><canvas id="canvas" width="300" height="300"></canvas><script type="text/javascript">//定义图表数据var uriage=[80,92,101,110,68,50,45,90,74,68,98,103];drawChart(uriage);//绘制折线数据图表的函数function drawChart(data){//获取上下文var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//描绘背景var gradient=ctx.createLinearGradient(0,0,0,300);gradient.addColorStop(0,"#e0e0e0");gradient.addColorStop(1,"#ffffff");ctx.fillStyle=gradient;ctx.fillRect(0,0,canvas.width,canvas.height);//计算坐标var grid_cols=data.length+1;var grid_rows=4;var cell_width=canvas.width/grid_cols;var cell_height=canvas.height/grid_rows;//绘制背景的方格线ctx.beginPath();for(var row=0;row<=grid_rows;row++){var y=row*cell_height;ctx.moveTo(0,y);ctx.lineTo(canvas.width,y);}for(var col=0;col<grid_cols;col++){var x=col*cell_width;ctx.moveTo(x,0);ctx.lineTo(x,canvas.height);}ctx.lineWidth=1;ctx.strokeStyle="#c0c0c0";ctx.stroke();//获取数据中最大值var max_v=0;for(var i=0;i<data.length;i++){if(data[i]>max_v)max_v=data[i];}//为了能让最大值能容纳在图表内，计算坐标max_v=max_v*1.1;//将数据转换为坐标var points=[];for(var i=0;i<data.length;i++){var v=data[i];var px=cell_width*(1+i);var py=canvas.height-canvas.height*(v/max_v);points.push({"x":px,"y":py});}//描绘折线ctx.beginPath();ctx.moveTo(points[0].x,points[0].y);for(var i=1;i<points.length;i++){ctx.lineTo(points[i].x,points[i].y); }ctx.lineWidth=2;ctx.strokeStyle="#ee0000";ctx.stroke();//绘制坐标图形（坐标对于一红色圈圈）for(var i in points){var p=points[i];ctx.beginPath();ctx.arc(p.x,p.y,6,0,2*Math.PI);ctx.fillStyle="#ee0000";ctx.fill(); }}</script></body></html>

0 0