如何用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>

柱状图做法如下：

电脑：联想小新air15

系统：Windows 10

软件：Excel2007

1、打开一个需要做柱状图的excel表格。

2、在表格中输入要生成柱状图的数据。

3、按照Ctrl键，同时按住鼠标左键选中要做成柱状图的数据。

4、选择菜单栏插入中红色方框标记的按钮。

5、如下图所示，d出插入图表对话框。

6、切换至所有图表标签页，选择需要的柱状图，并单击确定按钮，柱状图就做好了。

柱状图分类：

1、基本柱状图

和多色柱状图应用场景一样，都是展示二维数据，数据可以为多组数据。如每月的日常支出、临时支出、增值支出等，或者学生的各科成绩展示，亦可用在其它多种场景中。但建议多色柱状图仅用于单组数据中，因为柱状图为多色，无法通过图例辨别数组。

2、折柱混合图

和基本柱状图的应用是一样的，只是展示效果不同，当多组数据中，其中一组数据更趋向于了解其趋势的，可选折线图。或者数组多，显示有点拥挤，也可将其中的数据用折线图展示。

3、动态排序图

这个柱状图可从多数据三维度对数据进行排序展示，例如从年份、城市、GDP三个维度展示数据。

---