要展现一种数据，最直观的方式便是生成数据图，图例永远要比文字说明更加的清晰明了。因此，今天来生成一个利用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();

}

完整代码：

Document

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()

}