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>
评论