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

    文章

    78

    浏览量

    18101
  • 开源
    +关注

    关注

    3

    文章

    3335

    浏览量

    42483
  • CSS
    CSS
    +关注

    关注

    0

    文章

    109

    浏览量

    14372

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

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

收藏 人收藏

    评论

    相关推荐

    什么是大屏数据可视化?特点有哪些?

    大屏数据可视化是指通过大屏幕展示大量数据和信息,以直观、可视化的方式帮助用户理解和分析数据。这种展示方式通常
    的头像 发表于 12-16 16:59 158次阅读

    如何找到适合的大屏数据可视化系统

    选择合适的大屏数据可视化系统是企业或组织在数字转型过程中至关重要的一步。一个优秀的大屏数据可视化系统能够实时呈现关键业务
    的头像 发表于 12-13 15:47 118次阅读

    智慧能源可视化监管平台——助力可视化能源数据管理

    博达可视化大屏设计平台在智慧能源领域的价值体现在实时监控、数据可视化、决策支持和效率提升等方面。借助该平台,企业可以轻松搭建智慧能源类可视化大屏,更加精确和高效地管理生产和生活,实现能
    的头像 发表于 11-29 10:00 292次阅读
    智慧能源<b class='flag-5'>可视化</b>监管平台——助力<b class='flag-5'>可视化</b>能源<b class='flag-5'>数据</b>管理

    智慧楼宇可视化的优点

    智慧楼宇可视化是指通过数据可视化威廉希尔官方网站 来展示和分析楼宇的各种数据,为楼宇管理者和用户提供直观、清晰的信息展示和决策支持。以下是智慧楼宇可视化
    的头像 发表于 11-19 14:25 182次阅读

    工业数据可视化管理平台是什么

    数据可视化管理平台应运而生,它以其独特的功能和优势,正在成为工业数字转型的重要工具。 工业数据可视化管理平台的定义 工业
    的头像 发表于 08-28 14:21 292次阅读

    大屏数据可视化 开源

    在当今信息爆炸的时代,数据已经成为各个行业决策制定和业务发展的关键。为了更直观、准确地理解和利用海量数据, 大屏数据可视化 成为一种强大的工具。通过将
    的头像 发表于 06-27 16:06 406次阅读
    大屏<b class='flag-5'>数据</b><b class='flag-5'>可视化</b> <b class='flag-5'>开源</b>

    如何实现园区大屏可视化

    如何实现园区大屏可视化? 1.建立孪生模型:首先需要建立园区的孪生模型,即一个数字的虚拟模型,反映了园区的实际情况、结构、设备、人员等信息。这个模型可以通过传感器、监控设备、GIS 数据等实时获取和更新,确保与实际情况保持
    的头像 发表于 06-19 15:39 418次阅读
    如何实现园区大屏<b class='flag-5'>可视化</b>?

    态势数据可视化威廉希尔官方网站 有哪些

    智慧华盛恒辉态势数据可视化威廉希尔官方网站 是一种将数据以图形、图像、动画等视觉形式展现出来的威廉希尔官方网站 ,特别是在处理和分析态势数据时,该威廉希尔官方网站 能够将复杂的数据
    的头像 发表于 06-11 15:47 372次阅读

    智慧大屏是如何实现数据可视化的?

    智慧大屏,作为数据可视化的重要载体,已在城市管理、交通监控、商业运营等领域广泛应用。本文旨在阐述智慧大屏实现数据可视化的关键威廉希尔官方网站 和方法,包括数据
    的头像 发表于 06-04 15:02 602次阅读
    智慧大屏是如何实现<b class='flag-5'>数据</b><b class='flag-5'>可视化</b>的?

    大屏数据可视化的作用和意义

    大屏数据可视化是指利用大屏幕设备展示数据信息,通过图表、图像、动画等视觉手段将数据呈现出来,以便用户能够直观、清晰地理解
    的头像 发表于 06-03 17:56 666次阅读

    三维可视化数据大屏的设计原理和技巧

    三维可视化数据大屏设计面向交通、园区、城市、建筑、应急等领域的客户,以孪生可视能力赋能,提供行业解决方案。双渲染引擎,1:1还原真实世界,在模型运行流畅的基础上提供极佳的视觉效果。今天,古河云
    的头像 发表于 05-30 17:09 539次阅读

    大屏数据可视化是什么?运用了什么威廉希尔官方网站

    大屏数据可视化 是一种利用大屏幕设备展示数据可视化结果的威廉希尔官方网站 ,旨在以更生动、直观的方式呈现数据信息。这种
    的头像 发表于 05-24 15:35 856次阅读

    数据可视化:企业数字建设效果的呈现

    数据可视化即通过图表的形式将数据的内在信息有逻辑性地呈现给用户,使用户更容易发现数据中蕴藏的规律,找出问题,进而做出决策;另一方面,数据
    的头像 发表于 04-29 10:18 463次阅读
    <b class='flag-5'>数据</b><b class='flag-5'>可视化</b>:企业数字<b class='flag-5'>化</b>建设效果的呈现

    态势数据可视化威廉希尔官方网站 有哪些

    智慧华盛恒辉态势数据可视化威廉希尔官方网站 是一种将复杂、动态的态势数据以直观、易于理解的方式展现出来的威廉希尔官方网站 手段。以下是几种主要的态势数据可视化威廉希尔官方网站 : 网
    的头像 发表于 04-22 15:17 403次阅读