Charts.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引入： 

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添加到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> 

•  柱形图： 

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

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

个性化

 

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

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

最佳实践应该是将图表类型添加到选择器，这样一来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.   ...  
8. } 

•  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;  
15. } 

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

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;  
10. } 

•  动画效果：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