当前位置：首页 > CSS

css制作散点图

2026-02-27 09:43:06CSS

使用纯CSS创建散点图

通过CSS的flexbox和position属性可以快速实现散点图布局。定义一个容器，内部放置多个散点元素，通过调整每个点的位置和样式来模拟数据分布。

<div class="scatter-plot">
  <div class="dot" style="--x: 20%; --y: 30%; --size: 8px; --color: #ff6b6b;"></div>
  <div class="dot" style="--x: 50%; --y: 70%; --size: 12px; --color: #48dbfb;"></div>
  <!-- 更多数据点 -->
</div>

.scatter-plot {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 19px, #f0f0f0 20px
  );
}

.dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--color);
  transform: translate(-50%, -50%);
}

结合CSS变量动态控制

通过CSS变量（Custom Properties）动态控制每个点的位置、大小和颜色，便于与JavaScript交互实现数据绑定：

// 假设data是从API获取的数组
const plot = document.querySelector('.scatter-plot');
data.forEach(item => {
  const dot = document.createElement('div');
  dot.className = 'dot';
  dot.style.setProperty('--x', `${item.x}%`);
  dot.style.setProperty('--y', `${item.y}%`);
  dot.style.setProperty('--size', `${item.value}px`);
  plot.appendChild(dot);
});

添加动画效果

使用@keyframes为散点添加入场动画，增强视觉表现力：

.dot {
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

响应式适配

通过媒体查询调整散点图容器尺寸，确保在不同设备上正常显示：

@media (max-width: 600px) {
  .scatter-plot {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

高级技巧：伪元素标签

用::after伪元素为特殊数据点添加标签：

css制作散点图

.dot.highlight::after {
  content: attr(data-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
}

这种方法适用于简单可视化需求，复杂场景建议结合SVG或Canvas实现。