CSS和HTML绘图：小白也能轻松上手

前端

2023-02-26 19:00:51

用CSS和HTML绘制图表：简单、高效的利器

图表是数据可视化的强大工具，帮助我们理解复杂的数字信息。虽然ECharts等库非常流行，但对于绘制简单的图表来说，它们可能是大材小用，甚至会增加代码复杂度。

CSS 绘图的魅力：赋予图表生命

CSS拥有强大的动画功能，可以为图表增添灵动性和趣味性。通过CSS，您可以实现各种动画效果，如条形图的渐进增长、饼状图的旋转、折线图的平滑过渡等。这些效果能帮助用户更好地理解图表数据，提升图表的使用体验。

动手实践：一步步绘制常见图表

绘制条形图：直观展现数据对比

创建一个HTML文件，包含以下代码：

<div class="bar-container">
  <div class="bar" data-value="10"></div>
  <div class="bar" data-value="20"></div>
  <div class="bar" data-value="30"></div>
  <div class="bar" data-value="40"></div>
  <div class="bar" data-value="50"></div>
</div>

<style>
  .bar-container {
    display: flex;
    flex-direction: row;
    width: 600px;
    height: 400px;
  }
  .bar {
    width: 50px;
    height: 0;
    background-color: #007bff;
    margin: 0 10px;
    transition: height 1s ease-in-out;
  }
</style>

<script>
  const bars = document.querySelectorAll('.bar');
  bars.forEach((bar) => {
    bar.style.height = `${bar.dataset.value * 10}px`;
  });
</script>

保存文件为“bar-chart.html”，在浏览器中打开即可看到条形图。每个条形的高度代表相应的数据值。

绘制饼状图：展现数据比例关系

创建一个HTML文件，包含以下代码：

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

<style>
  .pie-container {
    width: 400px;
    height: 400px;
  }
  .pie {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #007bff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<script>
  const pie = document.querySelector('.pie');
  pie.style.transform = `rotate(${360 / 100 * 75}deg)`;
</script>

保存文件为“pie-chart.html”，在浏览器中打开即可看到饼状图。其中一个扇形代表75%的数据，另一个代表25%。

绘制折线图：展现数据趋势

创建一个HTML文件，包含以下代码：

<div class="line-container">
  <svg class="line-chart"></svg>
</div>

<style>
  .line-container {
    width: 600px;
    height: 400px;
  }
  .line-chart {
    width: 100%;
    height: 100%;
  }
  .line-chart path {
    fill: none;
    stroke: #007bff;
    stroke-width: 2px;
  }
</style>

<script>
  const lineChart = document.querySelector('.line-chart');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 0 0 L 100 100 L 200 50 L 300 150 L 400 100 L 500 200');
  lineChart.appendChild(path);
</script>