当前位置：首页 > CSS

css制作散点图

2026-01-28 06:40:49CSS

使用CSS制作散点图

在CSS中创建散点图可以通过绝对定位、伪元素和CSS变量等技术实现。以下是几种常见方法：

方法1：使用绝对定位和伪元素

通过为容器设置相对定位，为每个散点设置绝对定位，调整top和left属性控制位置：

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

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

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff6b6b;
  top: calc(var(--y) - 5px);
  left: calc(var(--x) - 5px);
}

方法2：使用CSS Grid布局

通过Grid布局结合grid-column和grid-row控制散点位置：

<div class="scatter-grid">
  <div class="grid-dot" style="--col: 3; --row: 2;"></div>
</div>

.scatter-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 300px;
  height: 300px;
}

.grid-dot {
  grid-column: var(--col);
  grid-row: var(--row);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4ecdc4;
}

方法3：动态生成散点（适用于大量数据）

结合HTML/CSS与JavaScript动态渲染散点：

<div class="dynamic-scatter" id="scatterContainer"></div>

.dynamic-scatter {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #f8f9fa;
}

.dynamic-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

const container = document.getElementById('scatterContainer');
const data = [{x: 0.2, y: 0.4}, {x: 0.7, y: 0.1}];

data.forEach(point => {
  const dot = document.createElement('div');
  dot.className = 'dynamic-dot';
  dot.style.left = `${point.x * 100}%`;
  dot.style.top = `${point.y * 100}%`;
  dot.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 60%)`;
  container.appendChild(dot);
});

样式增强技巧

添加坐标轴：使用伪元素或边框创建X/Y轴
动画效果：通过@keyframes实现散点入场动画
响应式调整：使用calc()或视窗单位适应不同屏幕尺寸
颜色变量：CSS变量统一管理颜色方案

:root {
  --dot-color-primary: #ff6b6b;
  --dot-color-secondary: #48dbfb;
}

.dot {
  transition: transform 0.3s;
}

.dot:hover {
  transform: scale(1.5);
}