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

1.进行表格数据的变形

把原始表格数据进行转换为如图的形式。

数据与数据之间有间隔，和图表的柱形一样有梯度。

2.图表的制作

选中变形的数据区域——点击插入——推荐的图表。

3.点击所有图表——堆积柱形图。

4.数据柱子——设置数据系列格式——分类间距（调整为0）。

5.添加标题和数据来源——根据表格需要，添加标题，标题尽量简洁，且能够反映表格内容，突出你想表达的观点。

字体（衬线字体：线条粗细不同，适合小号字体使用，投影时清晰度不高，无衬线字体：粗细相同，更适合大号字体时使用，投影时美观）

中文字体：微软雅黑，黑体

6.添加背景设——以单色调为主。

---