Charts.css数据可视化 CSS 框架

Charts.css 是一个将 HTML 元素样式转化为数据可视化图表的开源 CSS 框架，用简单的CSS 类即可将数据转换为漂亮的图表和图形。

特性

• 语义结构：使用 HTML 标签显示数据
• 可定制：使用 CSS 自定义样式
• 响应式：使用媒体查询进行缩放
• 无障碍：标记内的原始数据
• 种类繁多：支持多种图表类型
• 无依赖：零外部开销
• 小型库：文件大小 72kb，压缩后 6kb
• 更好的性能：没有 JS = 没有渲染
• 开源：可以自行修改代码

支持的图表类型

用法

数据使用语义 HTML 标记进行结构化，并使用 CSS 类设置样式，这些类的更改可显示为可视化图形。

<table class="charts-css [ column ] [ show-primary-axis show-4-secondary-axes ] [ data-spacing-4 reverse-data ]">

  <caption> Front End Developer Salary </caption>

  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Income </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> 2016 </th>
      <td style="--size: calc( 40 / 100 );"> $ 40K </td>
    </tr>
    <tr>
      <th scope="row"> 2017 </th>
      <td style="--size: calc( 60 / 100 );"> $ 60K </td>
    </tr>
    <tr>
      <th scope="row"> 2018 </th>
      <td style="--size: calc( 75 / 100 );"> $ 75K </td>
    </tr>
    <tr>
      <th scope="row"> 2019 </th>
      <td style="--size: calc( 90 / 100 );"> $ 90K </td>
    </tr>
    <tr>
      <th scope="row"> 2020 </th>
      <td style="--size: calc( 100 / 100 );"> $ 100K <br> 👑 </td>
    </tr>
  </tbody>

</table>