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

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

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

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

特点

Charts.css具有以下特点：

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

安装

使用jsdelivr CDN引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

使用unpkg CDN引入：

<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">

使用npm安装：

npm install charts.css

使用yarn安装：

yarn add charts.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>

链接: https://fly63.com/nav/3649