Charts.css 数据可视化 CSS 框架开源项目

我要开发同款
匿名用户2022年05月20日
136阅读
开发技术HTML/CSS
所属分类Web应用开发、CSS框架
授权协议MIT

作品详情

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

 

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

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

<tableclass="charts-css[column][show-primary-axisshow-4-secondary-axes][data-spacing-4reverse-data]"><caption>FrontEndDeveloperSalary</caption><thead><tr><thscope="col">Year</th><thscope="col">Income</th></tr></thead><tbody><tr><thscope="row">2016</th><tdstyle="--size:calc(40/100);">$40K</td></tr><tr><thscope="row">2017</th><tdstyle="--size:calc(60/100);">$60K</td></tr><tr><thscope="row">2018</th><tdstyle="--size:calc(75/100);">$75K</td></tr><tr><thscope="row">2019</th><tdstyle="--size:calc(90/100);">$90K</td></tr><tr><thscope="row">2020</th><tdstyle="--size:calc(100/100);">$100K<br>
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论