用html5做的柱状图,使用h5新特性canvas简单生成一个柱状图

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