Charts.css：一个数据可视化开源神器

 简介

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

创新互联建站主营米林网站建设的网络公司,主营网站建设方案,App定制开发,米林h5微信平台小程序开发搭建,米林网站营销推广欢迎米林等地区企业咨询

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引入：
 
 
 
 
    
  
  
  
  
    2.
  •  使用unpkg CDN引入：
 
 
 
 
    
  
  
  
  
    2.
  •  使用npm安装：
 
 
 
 
    
  
  
  
  
  1. npm install charts.css
    2.
  •  使用yarn安装：
 
 
 
 
    
  
  
  
  
  1. yarn add charts.css
    2.
  •  源码引入：
 
 
 
 
    
  
  
  
  
  1. // 从这里下载源码压缩包 
    2. 
  
  
  
  
  2. https://github.com/ChartsCSS/charts.css/releases 
    3. 
  
  
  
  
  3. // 把charts.min.css复制到自己的项目中并引入 
    4. 
  
  
  
  
    5.

简单使用

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

数据表示例：

 
 
 
 
    
  
  
  
  
  1.  
  2.   
    3.  
  3.   
    4.  
  4.     
    5.  
  5.        Country  
  6.        Gold  
  7.        Silver  
  8.        Bronze  
  9.     
    10.  
  10.   
    11.  
  11.   
    12.  
  12.     
    13.  
  13.        USA  
  14.       
    15.  
  15.       
    16.  
  16.       
    17.  
  17.     
    18.  
  18.     
    19.  
  19.        GBR  
  20.       
    21.  
  21.       
    22.  
  22.       
    23.  
  23.     
    24.  
  24.     
    25.  
  25.        CHN  
  26.       
    27.  
  27.       
    28.  
  28.       
    29.  
  29.     
    30.  
  30.   
    31.  
  31. 
  
  
  
   2016 Summer Olympics Medal Table 
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
      
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
   46 
  
  
  
   37 
  
  
  
   38 
  
  
  
  
    
  
  
  
  
    
  
  
  
  
  
  
  
   27 
  
  
  
   23 
  
  
  
   17 
  
  
  
  
    
  
  
  
  
    
  
  
  
  
  
  
  
   26 
  
  
  
   18 
  
  
  
   26 
  
  
  
  
    
  
  
  
      
  
  
  
  
    32.

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    Data  
    3. 
  
  
  
  
  3.

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    Data  
    3. 
  
  
  
  
  3.    Data  
    4. 
  
  
  
  
  4.    Data  
    5. 
  
  
  
  
  5.
  •  条形图：
 
 
 
 
    
  
  
  
  
  1. // 单数据集条形图 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. // 多数据集条形图 
    6. 
  
  
  
  
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8.

  •  柱形图：
 
 
 
 
    
  
  
  
  
  1. // 单数据集柱形图 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. // 多数据集柱形图 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8.

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

个性化

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

 
 
 
 
    
  
  
  
  
  1. // html 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. // css 
    6. 
  
  
  
  
  6. #my-chart { 
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8. }
    9.

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

 
 
 
 
    
  
  
  
  
  1. /* Custom style applies only on bar charts */ 
    2. 
  
  
  
  
  2. #my-chart.bar { 
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. /* Other style applies only on pie charts */ 
    6. 
  
  
  
  
  6. #my-chart.pie { 
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8. }
    9.
  •  3D效果：可以使用CSSbox-shadow属性
 
 
 
 
    
  
  
  
  
  1. #custom-effect tbody td { 
    2. 
  
  
  
  
  2.   margin-inline-start: 10px; 
    3. 
  
  
  
  
  3.   margin-inline-end: 20px; 
    4. 
  
  
  
  
  4.   box-shadow: 
    5. 
  
  
  
  
  5.     1px -1px 1px lightgrey, 
    6. 
  
  
  
  
  6.     2px -2px 1px lightgrey, 
    7. 
  
  
  
  
  7.     3px -3px 1px lightgrey, 
    8. 
  
  
  
  
  8.     4px -4px 1px lightgrey, 
    9. 
  
  
  
  
  9.     5px -5px 1px lightgrey, 
    10. 
  
  
  
  
  10.     6px -6px 1px lightgrey, 
    11. 
  
  
  
  
  11.     7px -7px 1px lightgrey, 
    12. 
  
  
  
  
  12.     8px -8px 1px lightgrey, 
    13. 
  
  
  
  
  13.     9px -9px 1px lightgrey, 
    14. 
  
  
  
  
  14.     10px -10px 1px lightgrey; 
    15. 
  
  
  
  
  15. }
    16.

  •  运动效果：当用户将鼠标悬停在数据项上时，背景颜色将发生变化
 
 
 
 
    
  
  
  
  
  1. #motion-effect tr { 
    2. 
  
  
  
  
  2.   transition-duration: 0.3s; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. #motion-effect tr:hover { 
    5. 
  
  
  
  
  5.   background-color: rgba(0, 0, 0, 0.2); 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. #motion-effect tr:hover th { 
    8. 
  
  
  
  
  8.   background-color: rgba(0, 0, 0, 0.4); 
    9. 
  
  
  
  
  9.   color: #fff; 
    10. 
  
  
  
  
  10. }
    11.
  •  动画效果：th元素每3秒旋转一次
 
 
 
 
    
  
  
  
  
  1. #animations-example-2 th { 
    2. 
  
  
  
  
  2.   animation: spin-labels 3s linear infinite; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. @keyframes spin-labels { 
    5. 
  
  
  
  
  5.   0%   { transform: rotateX(   0deg ); } 
    6. 
  
  
  
  
  6.   40%  { transform: rotateX( 360deg ); } 
    7. 
  
  
  
  
  7.   100% { transform: rotateX( 360deg ); }
    8. 
  
  
  
  
  8.  }
    9.

网页题目：Charts.css：一个数据可视化开源神器
浏览地址：http://www.mswzjz.cn/qtweb/news2/553852.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

营销型网站建设知识

分类信息网站

网站设计制作报价　　 　成都租用服务器　　 　新华建筑装饰　　 　金融行业网站建设方案　　 　整合营销　　 　成都康明斯发电机组　　 　定制网站制作　　 　成都广告制作　　 　顺泽窗帘　　 　网站建设公司　　 　时嘉做网站　　 　都江堰做网站　　 　LED网站设计方案　　 　成都网络推广　　 　名片印刷厂　　 　广东网站设计制作公司　　 　成都网站设计　　 　成都小程序开发　　 　IDC机房托管　　 　企业营销型网站