css图表制作

CSS图表制作方法

使用CSS制作图表可以通过多种方式实现，包括纯CSS、结合SVG或借助CSS框架。以下是几种常见的方法：

纯CSS条形图

利用HTML的<div>元素和CSS样式创建简单的条形图：

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

.chart {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
.bar {
  width: 40px;
  margin: 0 10px;
  background: #4285f4;
  height: var(--value);
}

CSS环形进度图

使用CSS的conic-gradient创建环形图：

<div class="pie-chart" style="--percentage: 75;"></div>

.pie-chart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#4285f4 calc(var(--percentage) * 1%), #eee 0);
}

CSS折线图

结合Flex布局和伪元素创建基础折线图：

<div class="line-chart">
  <div class="point" style="--y: 80;"></div>
  <div class="point" style="--y: 40;"></div>
</div>

.line-chart {
  display: flex;
  height: 100px;
  align-items: flex-end;
  position: relative;
}
.line-chart::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ccc;
}
.point {
  width: 20px;
  height: calc(var(--y) * 1%);
  background: #ea4335;
  margin: 0 10px;
}

CSS框架方案

使用现成的CSS框架可以快速实现复杂图表：

• Chart.css：纯CSS图表库
• CSS D3：结合D3.js的CSS方案
• Bootstrap图表组件

SVG与CSS结合

通过SVG绘制图表并用CSS控制样式：

<svg viewBox="0 0 100 50" class="chart">
  <path d="M0,50 L20,30 L40,40" class="line"/>
</svg>

.chart {
  width: 100%;
  height: auto;
}
.line {
  stroke: #34a853;
  stroke-width: 2;
  fill: none;
}

这些方法可根据需求复杂度选择，纯CSS方案适合简单可视化，复杂场景建议结合JavaScript库。