html 绘制气泡图基本散点图代码
时间: 2023-08-05 12:41:28 浏览: 49
以下是基本的 HTML 气泡图/散点图的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>气泡图/散点图</title>
<style type="text/css">
.chart {
position: relative;
width: 500px;
height: 400px;
margin: 0 auto;
}
.chart .dot {
position: absolute;
background-color: #007bff;
border-radius: 50%;
opacity: 0.7;
}
.chart .dot:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="chart">
<div class="dot" style="left: 100px; top: 200px; width: 50px; height: 50px;"></div>
<div class="dot" style="left: 250px; top: 150px; width: 30px; height: 30px;"></div>
<div class="dot" style="left: 350px; top: 300px; width: 20px; height: 20px;"></div>
</div>
</body>
</html>
```
在 `.chart` 类的 div 元素中,我们可以放置多个气泡/散点,每个气泡/散点都是一个带有 `.dot` 类的 div 元素。通过设置 `.dot` 类的样式,我们可以控制气泡/散点的大小、颜色和位置,从而实现气泡图/散点图的效果。