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>
评论
AxiisFlex 开源数据可视化框架
Axiis是一个数据可视化框架,于五月份使用MIT许可证发布。“数据可视化”这个词经常用来描述应用数据的图形化视图,如图表和图形。Axiis构建在Degrafa之上。Degrafa是为Flex应用的一
AxiisFlex 开源数据可视化框架
0
AVA-antvis数据可视化分析框架
AVA (VisualAnalytics)是一个可视化分析框架,其目标是成为一个自动化(Automated)、智能驱动(AIdriven)、支持增强分析(Augmented)的可视分析解决方案。
AVA-antvis数据可视化分析框架
0
LiteChart轻量级数据可视化图表框架
LiteChart是一款使用Swift开发,基于UIKit、面向iOS平台的轻量级数据可视化图表框架;只需少量代码,即可创建显示精美、动画流畅、高度自定义且易于移植的图表。(展示图片和动画效果请见文档
LiteChart轻量级数据可视化图表框架
0