html在SVG画布中绘制柱状图,数据集{(0,10), (1, 20), (2, 30), (3, 40), (4, 33), (5, 24), (6, 24), (7, 12), (8, 5)}
时间: 2023-10-07 17:07:06 浏览: 60
以下是一个用HTML和SVG画布绘制柱状图的例子,使用给定的数据集:
```html
<!DOCTYPE html>
<html>
<head>
<title>柱状图</title>
<style type="text/css">
svg {
background-color: #f9f9f9;
border: 1px solid #ddd;
}
rect {
fill: #1e90ff;
stroke: #fff;
stroke-width: 2;
}
text {
font-family: sans-serif;
font-size: 12px;
fill: #333;
}
</style>
</head>
<body>
<svg width="400" height="300">
<!-- x轴 -->
<line x1="50" y1="250" x2="350" y2="250" stroke="#666" stroke-width="2" />
<!-- y轴 -->
<line x1="50" y1="250" x2="50" y2="50" stroke="#666" stroke-width="2" />
<!-- x轴标签 -->
<text x="200" y="280" text-anchor="middle">横坐标</text>
<!-- y轴标签 -->
<text x="20" y="150" text-anchor="middle" transform="rotate(-90 20,150)">纵坐标</text>
<!-- 柱状图 -->
<g>
<!-- 每个柱子的宽度 -->
<rect x="60" y="220" width="30" height="30" />
<rect x="100" y="200" width="30" height="50" />
<rect x="140" y="170" width="30" height="80" />
<rect x="180" y="130" width="30" height="120" />
<rect x="220" y="160" width="30" height="90" />
<rect x="260" y="190" width="30" height="60" />
<rect x="300" y="190" width="30" height="60" />
<rect x="340" y="230" width="30" height="20" />
<rect x="380" y="245" width="30" height="5" />
<!-- 每个柱子的标签 -->
<text x="75" y="265" text-anchor="middle">10</text>
<text x="115" y="165" text-anchor="middle">20</text>
<text x="155" y="115" text-anchor="middle">30</text>
<text x="195" y="75" text-anchor="middle">40</text>
<text x="235" y="110" text-anchor="middle">33</text>
<text x="275" y="155" text-anchor="middle">24</text>
<text x="315" y="155" text-anchor="middle">24</text>
<text x="355" y="225" text-anchor="middle">12</text>
<text x="395" y="240" text-anchor="middle">5</text>
</g>
</svg>
</body>
</html>
```
说明:
- 首先定义SVG画布的宽和高为400和300。
- 然后在画布中画出x轴和y轴,x轴的起点为(50, 250),终点为(350, 250),y轴的起点为(50, 250),终点为(50, 50)。
- 接着在x轴和y轴上添加标签,x轴标签的位置为(200, 280),使用text-anchor属性设置文本的对齐方式为middle,y轴标签的位置为(20, 150),使用transform属性旋转文本90度。
- 最后,在<g>元素中绘制柱状图。每个柱子的位置和高度基于数据集中的值来计算。每个柱子的标签也在相应的位置上添加。使用rect元素绘制柱子,使用text元素添加标签。柱子的颜色为蓝色,标签的字体为sans-serif,字体大小为12px,颜色为黑色。