使用h5新特性canvas简单生成一个柱状图
2019-11-09 本文已影响0人
光年之外iii
要展现一种数据，最直观的方式便是生成数据图，图例永远要比文字说明更加的清晰明了。因此，今天来生成一个利用canvas画布上的柱状图。
首先，先设置一个x，y轴，以便于柱状图的生成
var canvas = document.getElementById('mycanvas')
var ctx = canvas.getContext('2d')
//获取画布的id。以及声明画布的书写方式为2d
//创建备用的数据
var data = {
x: ["一月", "二月", "三月", "四月", "五月", "六月"],
y: ["0", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"],
val: ["300", "210", "120", "560", "800", "660"],
col: ["red", "green", "blue", "skyblue", "limegreen", "pink"]
}
//画出x，y轴，并提前设置居中样式
ctx.translate(10, 900)
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(810, 0);
ctx.strokeStyle = 'blue';
ctx.closePath()
ctx.stroke()
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(10, -800);
ctx.strokeStyle = 'blue';
ctx.closePath()
ctx.stroke()
ctx.textAlign='center';
ctx.textBaseline='middle'
准备完成后，开始绘出柱状图
for (var i = 0; i < data.val.length; i++) {
ctx.beginPath();
ctx.moveTo(60 * (i + 1), 0);
//画出柱状图的位置，并给柱状图设置一个宽度
ctx.lineWidth = 40;
ctx.lineTo(60 * (i + 1), -data.val[i] / (10 / 8));
//按照比例对柱状图实际的尺寸进行缩小
ctx.strokeStyle = data.col[i];
//将数据，以及x轴参照数据点写入
ctx.fillText(data.x[i],60*(i+1),-data.val[i]/(10/8)-10)
ctx.closePath()
ctx.stroke()
}
绘制出y轴的数据点
for (var j = 0; j < data.y.length; j++) {
ctx.beginPath();
ctx.moveTo(0, -80*j);
ctx.lineTo(10, -80 * j);
ctx.fillText(data.y[j],20,-80*j)
ctx.strokeStyle = 'blue';
ctx.closePath();
ctx.stroke();
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="mycanvas" width="1000" height="1000" style="border:1px solid #f23"></canvas>
</body>
<script>
var canvas = document.getElementById('mycanvas')
var ctx = canvas.getContext('2d')
//获取画布的id。以及声明画布的书写方式为2d
//创建备用的数据
var data = {
x: ["一月", "二月", "三月", "四月", "五月", "六月"],
y: ["0", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"],
val: ["300", "210", "120", "560", "800", "660"],
col: ["red", "green", "blue", "skyblue", "limegreen", "pink"]
}
//画出x，y轴，并提前设置居中样式
ctx.translate(10, 900)
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(810, 0);
ctx.strokeStyle = 'blue';
ctx.closePath()
ctx.stroke()
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(10, -800);
ctx.strokeStyle = 'blue';
ctx.closePath()
ctx.stroke()
ctx.textAlign='center';
ctx.textBaseline='middle'
for (var j = 0; j < data.y.length; j++) {
ctx.beginPath();
ctx.moveTo(0, -80*j);
ctx.lineTo(10, -80 * j);
ctx.fillText(data.y[j],20,-80*j)
ctx.strokeStyle = 'blue';
ctx.closePath();
ctx.stroke();
}
for (var i = 0; i < data.val.length; i++) {
ctx.beginPath();
ctx.moveTo(60 * (i + 1), 0);
//画出柱状图的位置，并给柱状图设置一个宽度
ctx.lineWidth = 40;
ctx.lineTo(60 * (i + 1), -data.val[i] / (10 / 8));
//按照比例对柱状图实际的尺寸进行缩小
ctx.strokeStyle = data.col[i];
//将数据，以及参照数据点写入
ctx.fillText(data.x[i],60*(i+1),-data.val[i]/(10/8)-10)
ctx.closePath()
ctx.stroke()
}
</script>
</html>
