0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Charts.css是用于数据可视化的新的开源框架

数据分析与开发 来源:开源博客 作者:开源前哨 2021-04-13 10:48 次阅读

【导语】:Charts.css 是用于数据可视化的开源 CSS 框架,帮助用户理解数据,帮助开发人员使用简单的 CSS 类将数据转换为漂亮的图表。

简介

数据可视化可以改善用户体验,因为数据的图形表示通常更容易理解。可视化帮助最终用户理解数据,而Charts.css可以帮助开发人员使用简单的CSS类将其数据转换为精美的图形。

Charts.css是用于数据可视化的新的开源框架。它用CSS框架代替了传统的JS图表库。

传统的图表库往往使用JS渲染数据,严重依赖JS,大型的JS库通常会影响网站性能,搜索引擎也无法读取存储在JS对象中的数据。而Charts.css是现代的CSS框架,原始数据是HTML的一部分,使其对搜索引擎和可见;使用CSS不需要渲染,可以提高性能。

它支持多种数据展示形式,包括面形图、条形图、柱形图、折线图、多数据集面形图、多数据集条形图、多数据集及柱形图、多数据集折线图、百分比柱形图、堆积柱形图、3D条形效果、3D倾斜效果等。

Charts.css具有以下特点:

纯前端,使用HTML和CSS构建

简单易用

个性化定制,可以按照自己的方式设置图标样式

开源,可以修改代码

响应式

支持多种图表类型

项目地址是:

https://github.com/ChartsCSS/charts.css

安装

使用jsdelivr CDN引入:

使用unpkg CDN引入:

使用npm安装:

npminstallcharts.css

使用yarn安装:

yarnaddcharts.css

源码引入:

//从这里下载源码压缩包


https://github.com/ChartsCSS/charts.css/releases

// 把charts.min.css复制到自己的项目中并引入

《link rel=“stylesheet” href=“path/to/your/charts.min.css”》

简单使用

Charts.css将原始数据放在HTML的table元素中,从而使其对搜索引擎可见。

数据表示例:

《table》

《caption》 2016 Summer Olympics Medal Table 《/caption》

《thead

《tr》

《th scope=“col”》 Country 《/th》

《th scope=“col”》 Gold 《/th》

《th scope=“col”》 Silver 《/th》

《th scope=“col”》 Bronze 《/th》

《/tr》

《/thead》

《tbody》

《tr》

《th scope=“row”》 USA 《/th》

《td》 46 《/td》

《td》 37 《/td》

《td》 38 《/td》

《/tr》

《tr》

《th scope=“row”》 GBR 《/th》

《td》 27 《/td》

《td》 23 《/td》

《td》 17 《/td》

《/tr》

《tr》

《th scope=“row”》 CHN 《/th》

《td》 26 《/td》

《td》 18 《/td》

《td》 26 《/td》

《/tr》

《/tbody》

《/table》


将数据显示为图表,只需要将.charts-css添加到table元素的class属性中,并选择一种图表类型即可。

单一数据集,是指table中的每个tr元素只有一个td子元素:

《tr》

《td》 Data 《/td》

《/tr》

多数据集,是指table中的每个tr元素有多个td子元素:

《tr》

《td》 Data 《/td》

《td》 Data 《/td》

《td》 Data 《/td》

《/tr》

条形图:

// 单数据集条形图

《table class=“charts-css bar”》

。..

《/table》

// 多数据集条形图

《table class=“charts-css bar multiple”》

。..

《/table》

柱形图:

// 单数据集柱形图

《table class=“charts-css column”》

。..

《/table》

// 多数据集柱形图

《table class=“charts-css column multiple”》

。..

《/table》

每一种类型的图表其实都是类似的代码(也体现出了这个库的易用性),这里不再重复,详细参考官网。

个性化

要添加自定义CSS,只需在table标签中添加id或class即可:

// html

《table class=“charts-css 。..” id=“my-chart”》

。..

《/table》

// css

#my-chart {

。..

}

最佳实践应该是将图表类型添加到选择器,这样一来CSS就只适用于该图表类型,其他类型图表不会受影响:

/* Custom style applies only on bar charts */

#my-chart.bar {

。..

}

/* Other style applies only on pie charts */

#my-chart.pie {

。..

}

3D效果:可以使用CSSbox-shadow属性

#custom-effect tbody td {

margin-inline-start: 10px;

margin-inline-end: 20px;

box-shadow:

1px -1px 1px lightgrey,

2px -2px 1px lightgrey,

3px -3px 1px lightgrey,

4px -4px 1px lightgrey,

5px -5px 1px lightgrey,

6px -6px 1px lightgrey,

7px -7px 1px lightgrey,

8px -8px 1px lightgrey,

9px -9px 1px lightgrey,

10px -10px 1px lightgrey;

}

运动效果:当用户将鼠标悬停在数据项上时,背景颜色将发生变化

#motion-effect tr {

transition-duration: 0.3s;

}

#motion-effect tr:hover {

background-color: rgba(0, 0, 0, 0.2);

}

#motion-effect tr:hover th {

background-color: rgba(0, 0, 0, 0.4);

color: #fff;

}

动画效果:th元素每3秒旋转一次

#animations-example-2 th {

animation: spin-labels 3s linear infinite;

}

@keyframes spin-labels {

0% { transform: rotateX( 0deg ); }

40% { transform: rotateX( 360deg ); }

100% { transform: rotateX( 360deg ); }

}

编辑:jq

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • JS
    JS
    +关注

    关注

    0

    文章

    73

    浏览量

    17824
  • 开源
    +关注

    关注

    3

    文章

    2962

    浏览量

    41604
  • CSS
    CSS
    +关注

    关注

    0

    文章

    103

    浏览量

    14167

原文标题:Charts.css:一个数据可视化开源神器

文章出处:【微信号:DBDevs,微信公众号:数据分析与开发】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    数据可视化在大数据时代有哪些挑战?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年10月17日 17:02:01

    如何在数据可视化中保护数据隐私?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年10月16日 09:39:18

    数据可视化的应用有哪些?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年10月13日 09:19:27

    数据可视化有哪些常见的图表类型?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年10月11日 09:30:39

    数据可视化的发展趋势是什么?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年10月10日 09:31:59

    如何避免数据可视化中的误导和误解?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年10月09日 17:23:51

    数据可视化的未来发展趋势是什么?#可视化 #数据可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年09月25日 18:29:24

    数据可视化有什么优势?#可视化 #数据可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年09月25日 09:50:22

    如何设计有效的数据可视化?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年09月22日 09:25:51

    什么是数据可视化?如何进行数据可视化?#可视化 #光点科技

    数据可视化
    光点科技
    发布于 :2023年09月20日 17:41:03

    可视化大屏设计模板 | 主题皮肤(报表UI设计)

    报表UI模板) 内容:提供大量可供免费下载使用的数据可视化报表UI设计模板。常见的有以下几种类型: 1、经典蓝:以蓝色为主色调,搭配白色和灰色,整体风格简洁、大气,适用于企业汇报、领导监控等场景。 2
    发表于 09-12 10:10

    SpeedBI数据可视化工具:浏览器上做分析

    的分析思维变化做自助分析,如修改字段与维度组合;如双击钻取所有相关报表后,按需点击所需主题报表做分析等。 总结来看,SpeedBI数据分析云是一种方便、易用、功能强大的浏览器端数据可视化分析工具,适
    发表于 08-22 10:55

    keras可视化介绍

    keras可视化可以帮助我们直观的查看所搭建的模型拓扑结构,以及模型的训练的过程,方便我们优化模型。 模型可视化又分为模型拓扑结构可视化以及训练过程可视化。 以上一讲的mnist为例,
    发表于 08-18 07:53

    使用Google Charts可视化传感器数据

    电子发烧友网站提供《使用Google Charts可视化传感器数据.zip》资料免费下载
    发表于 06-16 10:48 0次下载
    使用Google <b class='flag-5'>Charts</b>来<b class='flag-5'>可视化</b>传感器<b class='flag-5'>数据</b>

    奥威BI数据可视化软件|让业务独立自主分析

    增加。怎么才能提高分析效率?BI数据可视化软件的零编程构建分析模型,让业务独立自助分析的做法也就应运而生了。零编程构建分析模型这种做法有两个明显的好处,一个是提高了数据分析的效率,另一个则是提高了
    发表于 04-11 10:29