如何用html实现柱状图

用 <canvas ....>

例如：<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3"></canvas>

然后用 javascript 在里面按数据比例，画矩形柱状块。写字。例如：

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas")//找到画布

var ctx = canvas.getContext("2d")//获得 built-in HTML obj

ctx.fillStyle = "#FF0000"//设颜色

ctx.fillRect(x1,y1,w1,h1)//画数据1柱状条

照猫画虎，画别的条。也可用数组，循环画条。

ctx.font = "30px Arial"//字体

ctx.fillText("my data 1", xx1,yy1)// 写什么东西，位置

照猫画虎，写字，也可以用数组 也可以 调ctx.的函数，画坐标 ...

}

</script>

chart.js是一款基于HTML5 Canvas的图表插件，chart.js的功能非常强大，它不仅提供了常见的柱形图、折线图、饼状图，而且还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有d性动画特效，这也是HTML5 Canvas的一大功劳。

---