当前位置：首页 > CSS

css 图表制作

2026-04-01 13:17:28CSS

CSS 图表制作方法

使用纯CSS制作图表可以通过多种方式实现，以下是几种常见的技术方案：

使用CSS Flexbox或Grid布局

通过Flexbox或Grid可以创建基础的条形图或饼图。定义一个容器元素，内部子元素根据数据比例设置宽度或高度。

.chart-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

.bar {
  flex-grow: 1;
  background-color: #4CAF50;
  margin: 0 2px;
  transition: height 0.5s;
}

CSS渐变创建饼图

使用conic-gradient可以创建简单的饼图效果。通过设置不同颜色的角度比例来表现数据。

css 图表制作

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #4CAF50 0% 30%,
    #2196F3 30% 60%,
    #FFC107 60% 100%
  );
}

CSS动画图表

为图表添加动画效果可以增强用户体验。使用@keyframes定义动画序列。

@keyframes grow {
  from { height: 0; }
  to { height: var(--height); }
}

.animated-bar {
  animation: grow 1s ease-out forwards;
}

CSS变量动态控制

结合CSS变量可以动态控制图表数据展示。通过JavaScript动态更新变量值。

css 图表制作

.bar {
  height: var(--bar-height, 0);
}

document.querySelector('.bar').style.setProperty('--bar-height', '75%');

伪元素创建复杂图表

利用:before和:after伪元素可以创建更复杂的图表元素，如数据点或连接线。

.data-point::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FF5722;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

响应式图表设计

使用媒体查询确保图表在不同设备上正常显示。调整图表尺寸和布局以适应不同屏幕。

@media (max-width: 600px) {
  .chart-container {
    flex-direction: column;
    height: auto;
  }
  .bar {
    width: var(--bar-height);
    height: 20px;
  }
}

浏览器兼容性考虑

对于较旧的浏览器，需要提供备用方案或使用polyfill。检测特性支持情况并相应调整。

@supports not (background: conic-gradient(red, green)) {
  .pie-chart {
    background: linear-gradient(90deg, #4CAF50 30%, #2196F3 30%, #2196F3 60%, #FFC107 60%);
  }
}

这些方法可以单独使用或组合使用，根据项目需求选择最适合的方案。纯CSS图表适合简单数据可视化需求，复杂场景建议结合JavaScript库如Chart.js或D3.js。