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 图表库的补充,而非替代品。

常见问题

我可以在 React、Vue 或其他前端框架中使用 Charts.css 吗?

可以。由于 Charts.css 只是一个应用于标准 HTML 表格元素的 CSS 文件,它可以在任何渲染 HTML 的框架中使用。你可以像往常一样在组件中生成表格标记,应用 charts-css 类,并在每个单元格上设置 --size 自定义属性。不需要特殊的绑定或包装库。

如何计算每个数据单元格的 --size 值?

--size 属性期望一个介于 0 和 1 之间的归一化数字。将每个数据点除以数据集中的最大值。例如,如果最高值是 1000,而某个单元格表示 400,则将 --size 设置为 0.4。你需要自己处理这种归一化,因为 Charts.css 没有内置的数据处理功能。

Charts.css 支持动画或过渡效果吗?

Charts.css 可以使用标准 CSS 过渡和关键帧动画,文档中包含运动效果的示例。但是,它不提供像 Chart.js 或 D3.js 等 JavaScript 库那样丰富的内置动画功能。

Charts.css 适合响应式设计吗?

Charts.css 图表默认是响应式的,因为它们使用标准 CSS 布局技术构建。图表会随其容器调整大小。你可以使用基于百分比的宽度控制尺寸,或通过内联样式设置明确的高度。对于更复杂的响应式行为,可以使用媒体查询在不同断点调整图表大小或切换图表类型。