HTML5中canvas画图之绘制数据图表
2016-06-11 22:38
549 查看
上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下:
实现代码如下:
<!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>
实现代码如下:
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 