如何用html实现柱状图

html-css036

如何用html实现柱状图,第1张

用 <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、首先将html文本内容转化为EXCEL表格,打开需要操作的EXCEL,点击图表,使之处于编辑状态,然后在图表工具中点击“布局”标签页。

2、其次点击“数据标签”,然后在其下拉选项中点击一个数据显示样式如“数据标签外”。

3、最后返回EXCEL表格,可发现在EXCEL中的柱状图上把数值显示出来操作完成。