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

时间:2021-09-22 03:16:19

 简介

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

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

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

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

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

Charts.css具有以下特点:

  •  纯前端,使用HTML和CSS构建
  •  简单易用
  •  个性化定制,可以按照自己的方式设置图标样式
  •  开源,可以修改代码
  •  响应式
  •  支持多种图表类型

项目地址是:

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

安装

 

  •  使用jsdelivr CDN引入: 
  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css"> 
  •  使用unpkg CDN引入: 
  1. <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css"> 
  •  使用npm安装: 
  1. npm install charts.css 
  •  使用yarn安装: 
  1. yarn add charts.css 
  •  源码引入: 
  1. // 从这里下载源码压缩包  
  2. https://github.com/ChartsCSS/charts.css/releases  
  3. // 把charts.min.css复制到自己的项目中并引入  
  4. <link rel="stylesheet" href="path/to/your/charts.min.css"> 

简单使用

 

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

数据表示例:

  1. <table>  
  2.   <caption> 2016 Summer Olympics Medal Table </caption>  
  3.   <thead>  
  4.     <tr>  
  5.       <th scope="col"> Country </th>  
  6.       <th scope="col"> Gold </th>  
  7.       <th scope="col"> Silver </th>  
  8.       <th scope="col"> Bronze </th>  
  9.     </tr>  
  10.   </thead>  
  11.   <tbody>  
  12.     <tr>  
  13.       <th scope="row"> USA </th>  
  14.       <td> 46 </td>  
  15.       <td> 37 </td>  
  16.       <td> 38 </td>  
  17.     </tr>  
  18.     <tr>  
  19.       <th scope="row"> GBR </th>  
  20.       <td> 27 </td>  
  21.       <td> 23 </td>  
  22.       <td> 17 </td>  
  23.     </tr>  
  24.     <tr>  
  25.       <th scope="row"> CHN </th>  
  26.       <td> 26 </td>  
  27.       <td> 18 </td>  
  28.       <td> 26 </td>  
  29.     </tr>  
  30.   </tbody>  
  31. </table> 

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

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

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

  1. <tr>  
  2.   <td> Data </td>  
  3. </tr> 

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

  1. <tr>  
  2.   <td> Data </td>  
  3.   <td> Data </td>  
  4.   <td> Data </td>  
  5. </tr> 
  •  条形图: 
  1. // 单数据集条形图  
  2. <table class="charts-css bar">  
  3.   ...  
  4. </table>  
  5. // 多数据集条形图  
  6. <table class="charts-css bar multiple"> 
  7.   ...  
  8. </table> 

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

  •  柱形图: 
  1. // 单数据集柱形图  
  2. <table class="charts-css column">  
  3.   ...  
  4. </table>  
  5. // 多数据集柱形图  
  6. <table class="charts-css column multiple">  
  7.   ...  
  8. </table> 

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

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

个性化

 

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

  1. // html  
  2. <table class="charts-css ..." id="my-chart">  
  3.   ...  
  4. </table>  
  5. // css  
  6. #my-chart {  
  7.   ...  

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

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

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

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

原文地址:https://mp.weixin.qq.com/s/cY99gQzmfuFwpMYVcpLpPA