css制作散点图

2026-02-13 01:05:11CSS

使用纯CSS制作散点图

通过CSS的flexbox或grid布局结合伪元素实现简单的散点图。以下是一个基于flexbox的示例：

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

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

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

结合CSS变量动态控制

通过CSS变量实现动态调整散点位置和样式：

css制作散点图

:root {
  --point-color: #4d96ff;
  --point-size: 8px;
}

.point {
  width: var(--point-size);
  height: var(--point-size);
  background-color: var(--point-color);
}

添加动画效果

为散点添加悬停动画增强交互性：

css制作散点图

.point {
  transition: transform 0.3s, background-color 0.3s;
}

.point:hover {
  transform: translate(-50%, -50%) scale(1.5);
  background-color: #ff0000;
}

响应式散点图

使用vw/vh单位实现响应式布局：

.scatter-plot {
  width: 80vw;
  height: 60vh;
}

高级技巧：伪元素生成散点

通过::before伪元素减少HTML标签数量：

<div class="scatter-plot">
  <div class="point-container" style="--x: 20%; --y: 30%;"></div>
</div>

.point-container::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  left: var(--x);
  top: var(--y);
}