Charts.css:使用纯 CSS 构建图表

大多数前端开发者在设计需要数据可视化时,本能地会选择 Chart.js 或 D3.js。这是一个合理的默认选择——直到你发现仅仅为了在文档页面或简单仪表板上渲染一个柱状图,就需要引入数百 KB 的 JavaScript。Charts.css 提供了一种不同的权衡方案:基于语义化 HTML 表格的纯 CSS 数据可视化,无需 JavaScript 渲染引擎。

下面介绍它的工作原理、擅长的场景,以及不适用的情况。

Charts.css 的工作原理:使用 CSS 样式化的 HTML 表格图表

Charts.css 是一个 CSS 框架,它使用工具类和 CSS 自定义属性将标准 <table> 元素转换为可视化图表。渲染过程不涉及 JavaScript。所有视觉工作都由浏览器的布局引擎完成。

核心思想很简单:你的数据存储在真实的 HTML 表格中。Charts.css 将该表格样式化为图表的外观。这意味着底层数据无需额外工作即可被屏幕阅读器和搜索引擎访问——尽管你仍然需要正确的标记才能获得全部好处。

安装

通过 CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

通过 npm:

npm install charts.css

使用 CSS 自定义属性表示数据

表格中的每个数据单元格使用 --size 自定义属性将其值表示为 0 到 1 之间的数字。这个归一化值是 Charts.css 用来确定视觉元素大小的依据——无论是条形、分段还是点。

以下是一个最小化的柱状图示例:

<table class="charts-css bar" style="height: 200px;">
  <caption>每月注册数</caption>
  <thead>
    <tr>
      <th scope="col">月份</th>
      <th scope="col">注册数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">一月</th>
      <td style="--size: 0.4;">400</td>
    </tr>
    <tr>
      <th scope="row">二月</th>
      <td style="--size: 0.7;">700</td>
    </tr>
    <tr>
      <th scope="row">三月</th>
      <td style="--size: 1.0;">1000</td>
    </tr>
  </tbody>
</table>

charts-css 类激活框架。bar 类设置图表类型。每个 <td> 上的 --size 值按比例控制条形长度。

应用不同的图表类型

切换图表类型只需更换类名。Charts.css 支持柱状图(bar)、列状图(column)、折线图(line)、面积图(area)、饼图(pie)等几种类型。功能支持程度各异——柱状图和列状图最为完善,而某些类型的自定义选项较为有限。

<!-- 列状图 -->
<table class="charts-css column">

<!-- 折线图 -->
<table class="charts-css line">

<!-- 饼图 -->
<table class="charts-css pie">

其他工具类可处理标签、坐标轴、间距和数据显示:

<table class="charts-css bar show-labels show-primary-axis data-spacing-10">

可访问性:真实但非自动

由于 Charts.css 使用实际的 <table> 标记,屏幕阅读器可以直接访问原始数据——这是相对于基于 canvas 或 SVG 的库的真正优势。但这只有在你正确编写表格时才有效:包含 <caption>,使用带有正确 scope 属性的 <th>,并确保单元格内容有意义。框架提供了结构,但可访问性仍然取决于你的标记。

何时使用 CSS 图表——何时不使用

Charts.css 适用于:

• 文档站点和静态页面
• 数据更新不频繁的简单仪表板
• 对包体积敏感的轻量级报表

它不适合:

• 需要工具提示、缩放或点击事件的交互式图表
• 实时或频繁更新的数据
• 复杂的可视化,如力导向图或自定义比例尺
• 需要精细渲染控制的大型数据集

对于这些场景,JavaScript 库的存在是有充分理由的。

结论

Charts.css 是一个专注的工具。它做好一件事:在不引入任何 JavaScript 渲染逻辑的情况下,将语义化 HTML 表格数据转换为可读的 CSS 图表。对于静态或低交互性场景,它的小体积优势难以辩驳。只需明确预期——它是 JavaScript 图表库的补充,而非替代品。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.