当前位置：首页 > CSS

css制作图表

2026-04-02 15:59:57CSS

CSS 制作图表的方法

CSS 可以用于创建简单的图表，结合 HTML 和少量 JavaScript 可以实现多种图表效果。以下是几种常见的方法：

使用 CSS 和 HTML 制作柱状图

通过 div 元素和 CSS 样式可以创建柱状图。每个柱子通过设置高度和背景色来表现数据。

<div class="bar-chart">
  <div class="bar" style="height: 60%;"></div>
  <div class="bar" style="height: 30%;"></div>
  <div class="bar" style="height: 80%;"></div>
</div>

.bar-chart {
  display: flex;
  height: 200px;
  align-items: flex-end;
  gap: 10px;
}

.bar {
  width: 50px;
  background-color: #4CAF50;
  transition: height 0.5s ease;
}

使用 CSS 制作饼图

通过 CSS clip-path 和 conic-gradient 可以创建饼图。

css制作图表

<div class="pie-chart"></div>

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #FF6384 0% 30%,
    #36A2EB 30% 70%,
    #FFCE56 70% 100%
  );
}

使用 CSS 和 SVG 制作折线图

结合 SVG 和 CSS 可以创建更复杂的图表，如折线图。

<svg class="line-chart" viewBox="0 0 200 100">
  <polyline
    points="10,90 50,50 90,70 130,30 170,80"
    fill="none"
    stroke="#FF6384"
    stroke-width="2"
  />
</svg>

.line-chart {
  width: 100%;
  height: auto;
  background-color: #f9f9f9;
}

使用 CSS 动画增强图表效果

通过 CSS 动画可以让图表加载时有动态效果。

css制作图表

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

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

结合 JavaScript 动态更新图表

如果需要动态更新数据，可以结合 JavaScript 修改 CSS 变量或 DOM 属性。

document.querySelectorAll('.bar').forEach((bar, index) => {
  const newHeight = [40, 70, 90][index];
  bar.style.height = `${newHeight}%`;
});

使用 CSS 框架简化图表制作

一些 CSS 框架（如 Chart.css）提供了预定义的图表样式，可以快速实现图表功能。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.css/dist/chart.min.css" />
<div class="chart" style="--labels: 'Jan, Feb, Mar'; --data: 60,30,80;"></div>