【导语】：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/...
装置
- 应用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>
将数据显示为图表，只须要将.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 ); } }开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10万+ Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。