当前位置：首页 > CSS

css制作散点图

2026-04-01 09:28:31CSS

使用CSS制作散点图

散点图可以通过CSS的绝对定位和伪元素实现。以下是一个简单的实现方法：

<div class="scatter-plot">
  <div class="point" style="--x: 20%; --y: 30%;"></div>
  <div class="point" style="--x: 50%; --y: 70%;"></div>
  <div class="point" style="--x: 80%; --y: 40%;"></div>
</div>

.scatter-plot {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: var(--x);
  top: var(--y);
}

添加坐标轴

可以添加伪元素来创建坐标轴：

.scatter-plot::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
}

.scatter-plot::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #333;
}

添加动画效果

为散点添加悬停动画：

.point:hover {
  transform: translate(-50%, -50%) scale(1.5);
  background-color: #e74c3c;
  transition: all 0.3s ease;
}

响应式散点图

使用CSS变量和视口单位实现响应式：

.scatter-plot {
  width: 90vw;
  max-width: 600px;
  height: 60vh;
  max-height: 400px;
}

高级样式选项

可以添加更多样式变化：

.point:nth-child(odd) {
  background-color: #2ecc71;
}

.point:nth-child(even) {
  background-color: #9b59b6;
}

工具提示功能

使用data-属性和伪元素添加工具提示：

css制作散点图

<div class="point" style="--x: 20%; --y: 30%;" data-value="A"></div>

.point::after {
  content: attr(data-value);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.point:hover::after {
  opacity: 1;
}

这种方法可以创建基本的散点图效果，适合简单的数据可视化需求。对于更复杂的数据可视化，建议使用专业图表库如Chart.js或D3.js。