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

、首先打开工具中的偏好设置

在这里插入图片描述

2、点击进入IPython控制台中的绘图选项，将图片格式修改为SVG

在这里插入图片描述

3、绘制图像后，点击鼠标右键，出现图片另存为

在这里插入图片描述

4、有png和svg两种格式可供选择

---